CSS设置a标签text-align:center为何无法让内部div居中

text-align: center 仅对行内元素、行内块元素生效，无法控制块级元素的对齐。你代码中<a>标签内部的<div>是默认块级元素，即便手动设置了100px固定宽度，仍然遵循块级布局流规则默认靠左排布，不会响应父元素的text-align属性。

CSS部分 #

a {
  display: block;
  text-align: center;
  background: green;
}

div {
  width: 100px;
  background: red;
}

HTML部分 #

<a>
  <div>
    Hello World
  </div>
</a>

• 块级元素原生居中方案：给内部div添加左右自动外边距，这是块级元素水平居中的标准写法，不需要修改父元素原有样式

div {
  width: 100px;
  background: red;
  margin: 0 auto;
}

• 适配现有text-align规则：把div的展示类型改为行内块，即可响应父元素已经设置的居中对齐规则

div {
  width: 100px;
  background: red;
  display: inline-block;
}

• Flex布局方案：将父元素a改为flex容器，通过主轴对齐属性控制子元素居中，适配更复杂的布局场景

a {
  display: flex;
  justify-content: center;
  background: green;
}
div {
  width: 100px;
  background: red;
}

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