<center>标签无法正常工作：页面头部h3元素偏右未完全居中

嘿，我来帮你搞定这个h3居中偏移的问题～

首先先揪出你代码里的明显bug：第二段的<center>标签没闭合，你只写了<center><h3>...</h3>，漏掉了</center>闭合标签，这会导致页面DOM结构混乱，甚至可能牵连第一段的布局，先把这个补上，改成：

<center><h3> Lijst van jongeren die jonger zijn dan 18 jaar </h3></center>

接下来解决第一段h3偏右的核心问题，同时给你更规范的居中方案：

为什么会出现偏右？ #

<center>是HTML里的过时标签（HTML5已废弃），它的居中逻辑依赖浏览器旧规则，很容易被其他样式干扰。常见的偏移原因有：

• 浏览器默认给<h3>设置了左右外边距（margin），这些默认边距会打乱<center>的居中计算
• 页面里的其他CSS规则（比如全局body的padding、自定义的h3样式）覆盖了居中效果
• 父容器的布局属性（比如固定宽度、overflow设置）限制了子元素的居中范围

推荐的现代替代方案（用CSS居中，稳定又可控） #

别再用<center>啦，改用CSS实现居中才是现代前端的标准做法，给你两种实用方案：

方法1：给单个h3加类，单独控制

<h3 class="centered-heading">Lijst van jongeren die ouder zijn dan 18 jaar</h3>
<h3 class="centered-heading">Lijst van jongeren die jonger zijn dan 18 jaar</h3>

然后在CSS里添加样式：

.centered-heading {
  text-align: center;
  /* 重置h3默认的不对称外边距，彻底避免偏移 */
  margin: 0 auto;
  /* 可选：让h3宽度适配文本，避免占满整行 */
  width: fit-content;
}

方法2：给父容器设置居中，批量控制

如果这两个h3都在同一个容器里，直接给父容器加样式，就能让里面所有内容自动居中：

<div class="center-container">
  <h3>Lijst van jongeren die ouder zijn dan 18 jaar</h3>
  <h3>Lijst van jongeren die jonger zijn dan 18 jaar</h3>
</div>

对应的CSS：

.center-container {
  text-align: center;
}
/* 可选：给h3设置上下间距，保持排版美观 */
.center-container h3 {
  margin: 1.5em 0;
}

快速排查当前偏移的小技巧 #

打开浏览器开发者工具（按F12），选中偏右的h3元素，查看「盒模型」面板：

• 检查左右margin值是否不对称
• 看有没有其他CSS规则（比如text-align: left）偷偷覆盖了居中样式
• 查看父元素的padding、width属性是否限制了居中范围

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