How to have a div size of the content in it-CodePudding

I want to have div the size of the content, or the best, the size 500px by 380px, but it has to be on the center. When I make the div specific size it goes off the center. What it looks right now without specific size: https://i.stack.imgur.com/s6cxe.jpg https://i.stack.imgur.com/l1yR3.png

.begin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #FDF8E6;
  transform: rotateY(180deg) rotateZ(50deg);
}

.board-container {
  position: relative;
}

.board {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 20px;
}

<div >
  <div >
    <button >Start</button>
    <button >Restart</button>
    <div >
      <div >0 moves</div>
      <div >time: 0 sec</div>
    </div>
  </div>
  <div  data-dimension-width="4" data-dimension-height="3">
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>

css code right now (I've cut out some unnecessary properties that doesn't change the position or/and size of the div)

What I want to achieve: https://i.stack.imgur.com/3KVdk.jpg

Thank you for all the help in advance :)

CodePudding user response：

Below an initial setup using flexboxes. You need to finetune the gaps, margins and paddings to your liking.

More information on flexbox can be found here

body {
  background: lightblue;
  margin: 0;
}

button {
  color: white;
  background: black;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.game {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls {
  display: flex;
  gap: 10px;
}

.stats {
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  color: white;
}

.board-container {
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px;
  margin: 10px 0 0;
}

.board-container>div {
  text-transform: uppercase;
}

<div >
  <div >
    <button >Start</button>
    <button >Restart</button>
    <div >
      <div >0 moves</div>
      <div >time: 0 sec</div>
    </div>
  </div>
  <div >
    <div>Choose difficulty</div>
    <button>Easy</button>
    <button>Medium</button>
    <button>Hard</button>
  </div>
</div>

CodePudding user response：

You have to add a max-width if you want to show like image

.game {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      text-align: center;
      background: #FDF8E6;
      transform: translate(-50%, -50%);
    }