将整个 CSS 网格相对于整个页面居中答案

【问题标题】：Center a whole CSS grid with respect to the whole page将整个 CSS 网格相对于整个页面居中
【发布时间】：2021-10-27 16:30:07
【问题描述】：

我有两个表格，我想在我的网页中居中（链接在这里：https://juancarlosortizr.github.io/sudoku/sudoku.html）。表格的 CSS 代码是：

但我已经尝试过到处寻找，我发现的只是如何将文本在单元格中相对于单元格本身居中；不是如何将整个表格居中（水平）。有什么办法吗？

    .grid-container {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
    } 

    .grid-container2 {
    display: inline-grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    }

    .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size: 18px;
    text-align: center;
    }

    <body>
    
    <!-- header and navbar omitted here -->
    
    <!-- The flexible grid (content) -->
    <div class="row">
      <!-- "side" omitted here -->
    
      <div class="main">
    
        <h2 id="sudoku">Sudoku Solver</h2>
            <p>Input a solvable sudoku, and it'll spit out a solution! If it's unsolvable, it'll let you know.

                You can leave empty squares empty, or fill them out with a zero or a dot.
            </p>

                <div class="grid-container">
                    <div class="grid-item"><input type="number" id="x1" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x2" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x3" name="quantity" min="1" max="9"></div> <!-- etc... -->
                    <div class="grid-item"><input type="number" id="x81" name="quantity" min="1" max="9"></div>
                  </div>
                </div>

                <p> <button onclick="solveSudoku()">Click when ready!</button> </p>

                <body> 
                    Here is the solution board. If it is full of dots, that means no solution exists! (Sadly, in the current version of the project, the algorithm doesn't detect whether or not the solution is unique).
                </body>
                <p>

                <body>    
                <div class="grid-container2">
                    <div class="grid-item"> <text id="board1"></text> </div>
                    <div class="grid-item"> <text id="board2"></text> </div>
                    <div class="grid-item"> <text id="board3"></text> </div> <!-- etc... -->


                    <div class="grid-item"> <text id="board81"></text> </div>
                </div>
            </body>

            </p>
      </div>
       
    </body>

整个内容可以在https://github.com/juancarlosortizr/juancarlosortizr.github.io/blob/master/sudoku/sudoku.html找到。

【问题讨论】：

能否添加您的 HTML
@BeerusDev 好的！完成

标签： html css centering

【解决方案1】：

我有一个可行的解决方案，将这些规则添加到您的 CSS 中

.panelb {
    display: flex;
}

.grid-container {
    /* flex: 1; <-- remove this line */
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
}

虽然我在您的 HTML 中看到您可能需要添加容器 div，但可以对第二个表使用类似的方法。

【讨论】：

也许我做错了，但添加此更改后 HTML 看起来相同。相反，如果我这样做 #grid-container 那么它会破坏整个事情。
也许是“
”破坏了我的网站？我的整个 HTML 都在
定义为 .row { display: flex;弹性包装：换行； }

【解决方案2】：

你可以试试这个

代替显示：inline-grid;
保留它：显示：网格；

并添加
width: fit-content;
在两个容器中

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
} 

.grid-container2 {
display: grid;
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
}

【讨论】：

太棒了！乐于助人。