如何使内部带有网格的div居中？ [复制]答案

【问题标题】：How to center a div with a grid inside? [duplicate]如何使内部带有网格的div居中？ [复制]
【发布时间】：2019-10-10 14:59:31
【问题描述】：

我正在构建一个学校项目，本来应该构建一个棋盘游戏，到目前为止，我已经在网格和几行 js 的帮助下制作了实际的棋盘。

现在我认为我正在做将容器 div 居中到其容器浏览器的简单部分，但哦，我没办法！到目前为止，没有任何一种正常的方式可以完成我想要的......所以现在我转向这里。最重要的是水平居中……其次是垂直居中。

到目前为止的代码如下：然后是 css - index.html

.container {
    margin: 0 auto;
    width: 100%;
}

.innerframe {
    display: grid;
    grid-template-columns: repeat(15, auto);
    grid-template-rows: repeat(12,auto);
    height: 720px;
    width: 900px;
    z-index: 1;
}

.light-floor-1 {
    background-image: url("../img/light_floor_1.png");
}

.light-floor-2 {
    background-image: url("../img/light_floor_2.png");
}

.dark-floor-1 {
    background-image: url("../img/dark_floor_1.png");
}

.dark-floor-2 {
    background-image: url("../img/dark_floor_2.png");
}

    <!doctype html>

    <html lang="sv">
      <head>
        <meta charset="utf-8">

        <title>Drakborgen</title>
  
        <link rel="stylesheet" href="css/board.css">
        <script src="js/site.js" async></script>
      </head>

   <body>
     <div id="container">
         <div id="boardgame" class="innerframe"></div>
         <div id="gameboard" class="gameframe">
         </div>
     </div>

    <script>
        window.onload = function() {
            drawBoard();
        }
    </script>
    </body>
    </html>

那个容器 div 是我尝试过的，但没有任何效果。我尝试使用 flexbox 但没有。正如你所看到的，我还有更多工作要做……boardgame div 和 gameboard div 应该在彼此之上，但我还没有。

【问题讨论】：

标签： html css css-grid

【解决方案1】：

在需要居中的div上使用css代码

div{
position:absolute;
margin:0;
top:50%;
left:50%:
transform:translate(-50%, -50%);
}

【讨论】：

不不成功。