如何在其中包含内容的 div 大小

Question

我想让 div 内容的大小，或者最好，大小为 500 像素 x 380 像素，但它必须位于中心。 当我使 div 特定大小时，它会偏离中心。 它现在看起来没有具体尺寸： 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 class="game"> <div class="controls"> <button class="start">Start</button> <button class="stop">Restart</button> <div class="stats"> <div class="moves">0 moves</div> <div class="timer">time: 0 sec</div> </div> </div> <div class="board-container" data-dimension-width="4" data-dimension-height="3"> <div class="board"></div> <div class="begin"></div> <div class="win"></div> </div> </div>

css 代码现在（我已经删除了一些不会改变 position 或/和 div 大小的不必要属性）

我想要实现的目标： https://i.stack.imgur.com/3KVdk.jpg

感谢您提前提供的所有帮助：）

Answer 1

下面是使用弹性盒的初始设置。 您需要根据自己的喜好微调间隙、边距和填充。

有关 flexbox 的更多信息，请参见此处

 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 class="game"> <div class="controls"> <button class="start">Start</button> <button class="stop">Restart</button> <div class="stats"> <div class="moves">0 moves</div> <div class="timer">time: 0 sec</div> </div> </div> <div class="board-container"> <div>Choose difficulty</div> <button>Easy</button> <button>Medium</button> <button>Hard</button> </div> </div>