高度是百分比的容器如何实现内部的单行文本垂直居中?

容器高度是百分比布局,如何实现它内部的单行文本垂直居中?

前提:容器的heigh:50%;容器内部就一行文本,不再添加标签让内部的文本垂直居中

<body>
<div style='height:50%'>
   一行文本
</div>
</body>
阅读 5.8k
4 个回答

一楼正解
line-height与height相同

使用绝对定位

  1. 父容器设置 position: relative;

  2. 子容器设置 position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center;

推荐问题