使用Flex布局居中div失败且右侧存在无法消除的额外边距

核心问题分析 #

1. flex布局作用对象错误：你给#clock设置的display:flex等属性，是让它内部的子元素（日期、时间模块）居中，而非#clock自身在浏览器窗口中居中。
2. 盒模型导致的“额外边距”：默认box-sizing: content-box下，width:338px仅计算内容宽度，加上左右10px padding和3px border后，元素实际总宽度会超出设定值，视觉上看起来右侧有多余边距。

修复代码 #

CSS 代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让width包含padding和border，解决额外宽度问题 */
  background: rgb(5, 52, 128);
}

body {
  min-height: 100vh; /* 让body铺满浏览器窗口高度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中所有子元素 */
}

.h1 {
  color: rgb(0, 238, 255);
  padding-top: 25px;
  margin-bottom: 20px; /* 与时钟保持间距 */
}

#clock {
  color: #ffffff;
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
  /* 内部子元素居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

HTML 代码（无需修改）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 class="h1">Current Time</h1>

    <!-- digital clock -->
    <div id="clock" class="datetime">
      <div class="date">
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div class="time">
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

另一种需求：时钟垂直居中（标题在顶部） #

如果希望时钟在浏览器窗口垂直水平居中，同时标题保留在顶部，可以调整CSS如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(5, 52, 128);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.h1 {
  color: rgb(0, 238, 255);
  padding-top: 25px;
  text-align: center; /* 标题水平居中 */
}

#clock {
  flex: 1; /* 占满body剩余高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.datetime {
  color: #ffffff;
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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