如何实现篮球计分板中分数文本的居中对齐？

你的问题出在计分板容器（.scoreboard）没有设置为flex容器，主容器的flex属性只对它的直接子元素生效，不会影响到.scoreboard内部的p标签。之前用margin:0 auto和padding的方式效果差，是因为p标签默认是块级元素，宽度占满父容器，margin:auto无法让它的内容居中，反而padding会打乱布局。

修复方案 #

只需要修改.scoreboard和p的CSS样式：

.scoreboard {
  margin-top: -40px;
  width: 150px;
  height: 125px;
  border: 1px solid #ffffff;
  border-radius: 2px;
  /* 添加flex布局，让内部元素居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

p {
  color: #ffa500;
  font-family: cursed-timer;
  font-size: 72px;
  /* 移除干扰居中的margin和padding */
  margin: 0;
  padding: 0;
  /* 适配特殊字体，确保文本自身水平居中 */
  text-align: center;
}

完整修改后的CSS代码 #

body {
  margin: 0;
}

@font-face {
  font-family: cursed-timer;
  src: url(cursed-timer.ttf);
}

.container {
  margin: 100px auto;
  width: 600px;
  height: 425px;
  background-color: #150400;
  display: flex;
  justify-content: space-evenly;
  border-radius: 2px;
}

h3 {
  margin-top: 75px;
  color: #ffffff;
  font-size: 48px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 1px;
}

.scoreboard {
  margin-top: -40px;
  width: 150px;
  height: 125px;
  border: 1px solid #ffffff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: #ffa500;
  font-family: cursed-timer;
  font-size: 72px;
  margin: 0;
  padding: 0;
  text-align: center;
}

HTML部分无需修改，保持原有结构即可。修改后，分数文本会在.scoreboard容器内实现完美的水平+垂直居中。

内容的提问来源于stack exchange，提问作者TheNickster