为何包裹p标签后文本无法通过vertical-align:middle实现垂直居中？

这问题其实是块级元素的默认特性和CSS属性的作用范围导致的，咱们来拆解清楚：

先看原来能居中的原因 #

当div里直接放hello world文本时，这段文本是匿名行内元素，你给div设置的line-height:70px刚好等于div的高度，行内元素会沿着line-height的中线对齐，所以实现了垂直居中——其实这里的vertical-align:middle根本没起作用，真正生效的是line-height。

加了p标签后失效的核心原因 #

p标签是块级元素，有两个关键点影响了居中：

1. 浏览器默认样式：绝大多数浏览器给p标签默认设置了margin: 1em 0;（上下外边距各1倍字体大小），这会让p标签和div的顶部、底部产生间距，看起来文本就偏下了。
2. line-height的作用范围：div的line-height只对它内部的行内/行内块元素生效，而p是块级元素，div的line-height不会传递给p里的文本；同时p自己的默认line-height是normal（大概是字体大小的1.2倍），远小于div的70px高度，所以文本在p内部也不会垂直居中。

另外还要纠正一个误区：vertical-align:middle只对行内元素、行内块元素、表格单元格生效，直接给块级元素（比如div、p）设置这个属性是完全没用的，之前你给div加这个属性其实是无效操作。

解决方法 #

这里给你两种常用的方案：

方案1：重置p的默认样式并设置line-height

保留原来的思路，调整p的样式即可：

div{
  width:300px;
  height:70px;
  border:1px solid red;
  font-size:30px;
  text-align:center;
  padding:0px;
  margin:0px;
}
p{
  margin:0; /* 去掉浏览器默认的上下外边距 */
  line-height:70px; /* 让p的行高等于div的高度，实现内部文本垂直居中 */
}

对应的HTML：

<div>
  <p>hello world</p>
</div>

方案2：用Flex布局（更简洁，推荐）

Flex布局天生支持水平和垂直居中，不用纠结line-height和默认边距：

div{
  width:300px;
  height:70px;
  border:1px solid red;
  font-size:30px;
  display:flex;
  justify-content:center; /* 水平居中 */
  align-items:center; /* 垂直居中 */
  padding:0px;
  margin:0px;
}
p{
  margin:0; /* 可选，去掉默认边距让布局更整齐 */
}

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