为什么设置text-align:center后div居中但按钮未居中？

问题表现：给两个子元素设置了完全相同的text-align: center内联样式后，包裹主页图标的内部div可正常在父容器内实现居中，但同样设置该样式的按钮元素却没有达到预期的居中效果。

相关实现代码 #

全局及父容器样式 #

body {
  color: white;
  background-color: #1E1B1B;
  border-color: grey;
}

.nav-col {
  background-color: transparent;
  margin: 10px;
  padding: 10px;
  font-size: 30px;
  border: 1px solid grey;
  height: 700px;
  width: 150px;
}

页面结构代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav-col">
  <div style="text-align:center"><i class="fa fa-home"></i></div>
  <button style="text-align:center;"><i class="fa fa-home"></i></button>
</div>

问题核心原因 #

text-align: center的生效规则是：控制元素内部的行内内容在元素自身的内容区内居中，不会改变元素自身在父容器中的位置。两种元素的渲染表现差异来自于默认的显示类型不同：

• 普通块级div：默认宽度会占满父容器的全部可用空间，给它设置text-align: center时，内部的图标（行内元素）会在整个div的宽度范围内居中，视觉上看起来就是图标在父容器内居中的效果。
• 按钮元素：默认是inline-block类型的可替换元素，宽度由自身内容撑开，不会自动占满父容器宽度。给按钮设置text-align: center，只会让按钮内部的图标在按钮自身的狭小内容区内居中，完全不会移动按钮本身的位置，因此视觉上按钮始终靠左显示。

可行解决方法 #

• 方法1：统一给父容器.nav-col设置text-align: center，让所有行内/inline-block类型的子元素（div、button）都基于父容器的内容区实现居中，无需单独给每个子元素设置居中样式。调整时只需移除两个子元素上的内联居中样式，给.nav-col追加text-align: center即可。
• 方法2：单独调整按钮的显示规则，将按钮设置为块级元素并搭配自动水平外边距，即给按钮追加display: block; margin: 0 auto;样式，让块级按钮通过左右自动外边距实现父容器内的水平居中。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture