span元素中vertical-align:middle属性失效问题求助

嘿，我来帮你搞定这个垂直居中的坑！你代码里的vertical-align: middle没生效，其实是因为这个属性对块级元素（你把span设成了display: block）完全不起作用——它本来是用来对齐行内元素、行内块元素或者表格单元格内容的，放到块级元素上自然没效果。

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

方案1：Flexbox布局（最推荐，现代浏览器全支持） #

用Flex可以轻松实现双方向居中，代码简洁还能兼容多行文本：

span {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 150px;
  width: 150px;
  border: 1px solid black;
}

<span>center</span>

方案2：Line-height（适合单行文本场景） #

如果你的文本只会是单行，把line-height设成和height一样的值，配合text-align: center就能快速实现居中：

span {
  text-align: center;
  line-height: 150px; /* 与height值完全一致 */
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: block;
}

⚠️ 注意：多行文本用这个方法会导致文本重叠，谨慎使用！

方案3：Grid布局（和Flex一样简洁） #

Grid的place-content: center属性可以一步实现水平+垂直居中，写法更短：

span {
  display: grid;
  place-content: center;
  height: 150px;
  width: 150px;
  border: 1px solid black;
}

方案4：Table-cell方式（兼容老浏览器） #

如果需要兼容IE这类老浏览器，可以用表格布局的思路，不过需要给span加个父容器：

.container {
  display: table;
  height: 150px;
  width: 150px;
  border: 1px solid black;
}
span {
  display: table-cell;
  text-align: center;
  vertical-align: middle; /* 这里就能生效了！ */
}

<div class="container">
  <span>center</span>
</div>

总的来说，推荐用Flex或Grid，这俩是现代前端布局的首选，灵活且能应对各种文本场景~

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