如何在保留inline-block属性的同时实现文本垂直水平居中？

给你几个不破坏.aboutme-trio__section行内排列特性（即保留类似inline-block的表现）的居中方案，按需选择：

方案1：inline-flex布局（推荐，适配多行文本） #

直接把元素的display设为inline-flex，它兼具inline-block的行内排列特性，同时能通过flex属性轻松实现内部文本的双方向居中：

.aboutme-trio__section {
  display: inline-flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 多行文本时，每行内容也水平对齐 */
  /* 保留你原来的宽度、间距等样式 */
  width: 30%;
  margin: 0 1%;
  min-height: 180px;
}

这个方案不管文本是单行还是多行，都能完美居中，而且不会改变元素的行内排列逻辑，不会导致布局崩溃。

方案2：line-height + text-align（适合单行文本） #

如果你的文本肯定不会换行，可以用行高等于元素高度的方式实现垂直居中，配合text-align实现水平居中：

.aboutme-trio__section {
  display: inline-block;
  text-align: center; /* 水平居中 */
  line-height: 180px; /* 行高等于元素高度，实现垂直居中 */
  width: 30%;
  height: 180px;
  margin: 0 1%;
}

注意：如果文本换行，这个方法会让多行文本间距过大，只适合单行场景。

方案3：上下相等padding（无需固定高度） #

如果不需要固定元素高度，可以通过设置上下相等的内边距，让文本自然垂直居中，配合text-align实现水平居中：

.aboutme-trio__section {
  display: inline-block;
  text-align: center; /* 水平居中 */
  padding: 50px 20px; /* 上下padding值相等，实现垂直居中 */
  width: 30%;
  margin: 0 1%;
}

这个方案的优势是元素高度会随内容自适应，适合内容高度不固定的场景。

为什么之前的W3C方法导致布局崩溃？ #

大概率是你误用了针对块级元素的居中方案（比如给元素设置display: block+margin: auto），这类方法会破坏inline-block的行内排列特性，让元素独占一行，进而打乱整个布局。上面的方案都基于行内元素的特性设计，不会出现这个问题。

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