我使用 HTML 和 CSS 制作了一个棋盘来完成一项任务。现在我需要将此棋盘放置在 box 元素内，以便左/右边距相同，并显示标题元素。我尝试使用 margin: auto; 但这不起作用也没有将框大小更改为内容框或边框框。
我不允许使用 line-height 来垂直对齐，所以我需要 display:table-cell 和 vertical-align:middle。如果有帮助，我也不能使用 justify-content。应该使用基本的 HTML 和 CSS 来完成。
如何让棋盘像图像一样正确定位？
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="chessboardbox">
<h2>Chessboard</h2>
<table class="chessboard">
<tr class="chessboard">
<td class="chessboard">♜</td>
<td class="chessboard">♞</td>
<td class="chessboard">♝</td>
<td class="chessboard">♛</td>
<td class="chessboard">♚</td>
<td class="chessboard">♝</td>
<td class="chessboard">♞</td>
<td class="chessboard">♜</td>
</tr>
<tr class="chessboard">
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
<td class="chessboard">♟</td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
<td class="chessboard"></td>
</tr>
<tr class="chessboard">
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
<td class="chessboard">♙</td>
</tr>
<tr class="chessboard">
<td class="chessboard">♖</td>
<td class="chessboard">♘</td>
<td class="chessboard">♗</td>
<td class="chessboard">♕</td>
<td class="chessboard">♔</td>
<td class="chessboard">♗</td>
<td class="chessboard">♘</td>
<td class="chessboard">♖</td>
</tr>
</table>
</section>
</body>
</html>
CSS
.chessboardbox {
box-sizing: border-box;
border: 5px solid silver;
max-width: 1200px;
}
table.chessboard {
box-sizing: border-box;
display: table-cell;
margin: 48px auto;
background: #999;
border: 5px solid red;
box-shadow: 0 0 0 20px #fff, 0 0 0 40px black;
}
td.chessboard {
width: 80px;
height: 80px;
font-size:50px;
}
tr.chessboard {
text-align: center;
vertical-align: middle;
}
tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
background: white;
}