使用CSS网格实现垂直和水平居中的4x4正方形格子。

Question

使用CSS网格实现垂直和水平居中的4x4正方形格子。

5

我想使用div和css-grid编写2048游戏。这是我想象的输出结果：

我已经有了适应浏览器窗口的外部部分，我只想在中间的中左侧div（名为game-container）中编写4x4网格（水平和垂直）。

<div class = "game-container">
  <div class = "game">
    <div class = "game-cell"></div>
    <!-- 16 game cells total -->
    <div class = "game-cell"></div>
  </div>
</div>

我使用以下内容创建了一个4x4网格：

div.game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

然而，我对以下几点存在问题：

如何使每个game-cell正方形（例如50px）
如何在game-cell的中央显示数字
如何让div们相互接触

我可以完成其中任意一个，但不能同时完成所有内容。

此外，如何将game div显示在game-container div的中央（就像图片中那样）。

附：如果使用Bootstrap可简化一些问题。

关于外部容器的一些信息：

html, body, div.container{
    height: 100%;
    margin: 0;
    padding: 0;
}

div.container {
  display:grid;
  grid-template-rows: 3fr 9fr 2fr;
  grid-template-columns: 3fr 5fr;
  grid-gap: 2px;
  background-color: yellow;
}

- Fallen Apart

1

为什么你使用 1fr 而不是你想要的 50px 的大小，然后将 game div 设置为 200px？ - Paulie_D

@Paulie_D 太好了！它解决了问题的第一部分。现在我只需要将 game div 居中于 game-container 中。你知道怎么做吗？ - Fallen Apart

在SO上有数百个居中的问题。只需查看右侧边栏中的相关问题即可。 - Paulie_D

1

将"text-align:center"添加到"game-container"。 - Gautam Naik

@GautamNaik 它使文本居中，但 game div 仍然在左上角。 - Fallen Apart

可能是重复的问题: CSS Grid中心对齐 - Michael Benjamin

3个回答

1

将以下内容添加到您的.game-container css中。

 display: flex;
 align-items: center;
 justify-content: center;

.game {
  display: grid;
  width: 120px;
  height: 120px;
  border:1px solid black;
}

.game-container{
    height: 500px;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}

<div class = "game-container">

    <div class = "game">
     
    </div>

</div>

- Gautam Naik

@FallenApart，那只是为了演示目的。 - Gautam Naik

添加高度和宽度会破坏我的主容器布局。 - Fallen Apart

好的。谢谢，但我想我会放弃垂直居中，只是在顶部添加一些填充。 - Fallen Apart

如果您想要占据整个屏幕的高度，则将容器的高度设为100vh。 - Gautam Naik

它已经占据了整个屏幕。请查看已编辑的问题。 - Fallen Apart

问题已解决。只需在“game-container”中添加“margin: auto;”，便可使所有内容垂直和水平居中对齐。 - Fallen Apart

-1

这是完整的解决方案，结合了社区中的答案和评论。

html, body, div.container{
 height: 100%;
 margin: 0;
 padding: 0;
}

div.container {
  display:grid;
  grid-template-rows: 3fr 9fr 2fr;
  grid-template-columns: 3fr 5fr;
  grid-gap: 2px;
  background-color: yellow;
}

div.container > div {
  background-color: #99c2ff;
}

div.header {
  grid-column: 1/3;
  grid-row: 1/2;
}

div.game-container {
  display: flex;
  grid-column: 1/2;
  grid-row: 2/3;
  text-align: center;
}

div.menu {
  grid-column: 2/3;
  grid-row: 2/3;
}

div.footer {
  grid-column: 1/3;
  grid-row: 3/4;
}


div.game {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(4, 80px);
  margin: auto;
}

div.grid-cell {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 20px;
  background-color: #e6f0ff;
}

div.value-cell {
  margin: auto;
}

h1, h2, h3, h4 {
 text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>2048</title>
  </head>

  <body>

    <div class="container">
      <div class="header">
        <h3>Title</h3>
      </div>
      <div class = "game-container">
          <div class = "game">
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">2</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">16</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           <!-- <div class="grid-row"> -->
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
             <div class="grid-cell"><div class="value-cell">1024</div></div>
             <div class="grid-cell"><div class="value-cell"></div></div>
           <!-- </div> -->
           </div>
       </div>
       <div class="menu">
         <p>Some info</p>
       </div>
       <div class="footer">
         <h4>Footer</h4>
       </div>
     </div>

  </body>
</html>

- Fallen Apart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ashish singh · Accepted Answer

使用弹性布局（flexbox）来实现它，不需要使用网格布局。

div.game {
  display: grid;
  width: 50vw;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 120px;
  height: 120px
}

.game-cell {
  width: 30px;
  height: 30px;
  border: 1px solid ;
  box-sizing: border-box;
}

.left-half{
  width: 50vw;
  height: 100vh;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

body{
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class = "game-container">
  <div class="left-half">
    <div class = "game">
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
      <div class="game-cell"></div>
    </div>
  </div>
</div>
</body>
</html>