a标签包裹h1后自动移至左上角的CSS布局异常问题排查

原有居中效果依赖table布局的层级规则实现：父容器.box1设置display: table，直接子元素h1设置display: table-cell，配合vertical-align: middle、text-align: center完成水平+垂直居中。
当h1外层嵌套<a>标签后，DOM层级变为.box1 > a > h1，.box1的直接子元素从h1变成了默认行内属性的a标签：

• 中间的a标签未设置任何table相关布局属性，直接打断了table布局的渲染链路
• 写在h1上的display: table-cell规则找不到上层直接关联的table容器，布局逻辑完全失效
  最终导致标题偏移到页面左上角。

方案1：补全table布局链路（保留原有布局逻辑） #

给嵌套的a标签补充对应table布局属性，让层级渲染逻辑通顺，调整后代码如下：

/* 父容器原有样式保持不变 */
.box1 {
  height: 100vh;
  width: 100%;
  background-image: url(pics/test.jpg);
  background-size: cover;
  background-position: center;
  display: table;
  background-attachment: fixed;
}

/* 新增a标签样式，承接table-cell布局角色 */
.box1 > a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
}

/* h1移除重复的布局属性，仅保留文字样式 */
.box1 h1 {
  font-size: 48px;
  color: #fff;
  margin: 0px;
  display: inline-block;
}

对应HTML结构：

<div class="box1">
  <a href="/">
    <h1>Test Site</h1>
  </a>
</div>

方案2：替换为flex布局（容错性更高，推荐） #

table布局对DOM层级要求严格，后续如果再加嵌套标签很容易再次失效，换成flex居中方案不需要严格依赖直接子元素层级，维护成本更低：

.box1 {
  height: 100vh;
  width: 100%;
  background-image: url(pics/test.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* 替换table布局为flex */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1 a {
  text-decoration: none;
}

.box1 h1 {
  font-size: 48px;
  color: #fff;
  margin: 0px;
}

注意：display: table布局的生效前提是直接子元素必须设置display: table-cell（或包裹table-row层级），中间插入任何未设置对应display值的标签都会打断布局链路，这也是这类居中写法的常见坑点。

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