HTML+CSS实现国际象棋棋盘时边框缺失、文字无法居中问题求助

针对你遇到的两个问题，可通过以下CSS修改实现需求：

1. 修复周边数字字母居中问题 #

你此前设置的justify-content、vertical-align属性对浮动块元素不生效，统一给所有标注元素、棋盘格子添加flex布局即可实现水平+垂直双向居中：

/* 新增这段CSS */
.black, .white, [class^="outside"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

该规则对反转后的标注内容同样生效，无需额外调整翻转属性。

2. 修复内边框缺失问题 #

边框断档是因为四个角的装饰块仅设置了两条边的边框，无法和上下左右的标注栏边框衔接，给四个角的类补充对应边框即可：

/* 给四个角的类补充以下边框属性 */
.outsidelefttop {
    border-right: 10px solid #b38365;
    border-bottom: 10px solid #b38365;
}
.outsiderighttop {
    border-left: 10px solid #b38365;
    border-bottom: 10px solid #b38365;
}
.outsideleftbottom {
    border-right: 10px solid #b38365;
    border-top: 10px solid #b38365;
}
.outsiderightbottom {
    border-left: 10px solid #b38365;
    border-top: 10px solid #b38365;
}

可选优化 #

你代码中定义的.chessboardbelso类没有在HTML中引用，属于冗余代码可直接删除。如果后续出现浮动元素错位导致的缝隙，可给.chessboard类添加display: grid; grid-template-columns: repeat(10, 1fr);替代浮动布局，稳定性更高，无需额外处理浮动坍塌问题。

内容的提问来源于stack exchange，提问作者Balázs Mihály