div高度为百分比时，如何使内部文本垂直居中？

嘿，这个垂直居中的坑我踩过好多次！你之前用line-height: 20%的思路走不通，核心原因是：line-height的百分比值是基于元素的字体大小计算的，不是容器的高度。比如如果你的.quote字体是16px，那line-height:20%实际只有3.2px，远小于容器的20%高度，根本起不到垂直居中的作用。

下面给你几个靠谱的解决方案，从现代到兼容旧浏览器的都有：

方法一：Flexbox布局（最推荐，现代浏览器友好） #

Flexbox是现在处理布局的首选，不管容器高度是百分比还是固定值，都能轻松实现垂直居中：

.black { 
  background-color:#333333; 
  margin: 0px; 
  height: 20%; 
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 可选：同时实现水平居中，和.quote的text-align:center可以二选一 */
}
.quote { 
  font-family:Courier New, monospace; 
  font-style:italic; 
  color:white; 
  text-align:center; 
}

原理：align-items: center会让子元素在Flex容器的交叉轴（这里是垂直方向）上居中，完全不受容器高度单位的影响，灵活度拉满。

方法二：Grid布局（更简洁的双居中方案） #

Grid比Flexbox更简洁，一行代码就能同时搞定水平+垂直居中：

.black { 
  background-color:#333333; 
  margin: 0px; 
  height: 20%; 
  display: grid;
  place-items: center; /* 同时设置垂直+水平居中 */
}
.quote { 
  font-family:Courier New, monospace; 
  font-style:italic; 
  color:white; 
}

这里.quote的text-align:center可以直接去掉，因为place-items: center已经帮你实现了水平居中，代码更干净。

方法三：绝对定位+transform（兼容旧浏览器） #

如果需要兼容IE9及以上的旧浏览器，这个方案更稳妥：

.black { 
  background-color:#333333; 
  margin: 0px; 
  height: 20%; 
  position: relative; /* 父容器设为相对定位，作为子元素绝对定位的参照 */
}
.quote { 
  font-family:Courier New, monospace; 
  font-style:italic; 
  color:white; 
  text-align:center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让元素自身向左、向上偏移50%，实现精准居中 */
  width: 100%; /* 确保文本换行时不会超出容器宽度 */
}

原理：transform: translate(-50%, -50%)里的百分比是相对于元素自身的尺寸计算的，所以不管父容器高度是多少，都能完美居中，不需要依赖现代布局属性。

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