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

Question

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

但我尝试到处寻找，但我发现的只是如何相对于单元格本身将文本在单元格中居中；不是如何将 table 作为一个整体（水平）居中。有办法吗？

    .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 找到。

Answer 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;
}

第二个 table 可以使用类似的方法，尽管我在您的 HTML 中看到您可能需要添加一个容器 div。

Answer 2

你可以试试这个

而不是显示：内联网格；
保留它：显示：网格；

并添加
宽度：适合内容；
在两个容器中

.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;
}

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

Center a whole CSS grid with respect to the whole page

html

css

centering