文本无法垂直水平居中对齐问题求助

我来帮你搞定这个垂直居中的问题！你现在遇到的情况是vertical-align: middle没起作用，这是因为这个属性的生效需要特定的布局上下文——它只对行内元素、表格单元格或者Flex容器内的项目生效，而你的父容器.panel-small默认是块级元素，没有设置合适的布局方式，所以直接给子元素加这个属性没用。

下面给你几种实用的解决方案，按需选择：

方案1：Flex布局（推荐，现代浏览器首选） #

Flex布局是目前实现居中最简洁的方式，兼容性也很好（IE11及以上支持），不管文本是单行还是多行都能完美适配。修改你的CSS如下：

.panel-small.sport {
  background-image: url("../img/sport.png");
  left: 248px;
  /* 开启Flex布局 */
  display: flex;
  justify-content: center; /* 实现水平居中 */
  align-items: center;     /* 实现垂直居中 */
  /* 必须给父容器设置明确高度，否则容器会自适应内容高度，看不出垂直效果 */
  height: 120px; /* 替换成你的背景图实际高度 */
  position: relative; /* 因为用了left定位，需要设置position为relative/absolute */
}

/* 原来的.panel-small * 规则可以删掉，Flex已经处理了居中 */

HTML不需要做任何修改，这样文本就能同时水平和垂直居中了。

方案2：表格布局法 #

如果需要兼容更老的浏览器（比如IE8），可以用表格布局的思路：

.panel-small.sport {
  background-image: url("../img/sport.png");
  left: 248px;
  display: table;
  height: 120px; /* 设置容器高度 */
  width: 200px; /* 可选，根据需求设置宽度 */
  position: relative;
}

.panel-small.sport b {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

这种方法模拟了表格单元格的居中行为，兼容性很好。

方案3：单行文本专属——line-height法 #

如果你的文本肯定是单行的，用行高等于容器高度的方法最省事：

.panel-small.sport {
  background-image: url("../img/sport.png");
  left: 248px;
  height: 120px; /* 容器高度 */
  line-height: 120px; /* 行高和容器高度一致 */
  text-align: center; /* 水平居中 */
  position: relative;
}

注意：如果文本换行，这个方法会失效，只适合单行场景。

方案4：绝对定位+transform #

这种方法不依赖父容器的布局类型，兼容性也不错：

.panel-small.sport {
  background-image: url("../img/sport.png");
  left: 248px;
  height: 120px; /* 设置容器高度 */
  position: relative; /* 父容器设为相对定位 */
}

.panel-small.sport b {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 通过transform将元素自身向左向上偏移50%，实现居中 */
  transform: translate(-50%, -50%);
}

关键提示 #

不管用哪种方法，一定要给父容器设置明确的高度，否则容器高度会和文本高度一样，垂直居中的效果就体现不出来啦！

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