容器高度是百分比布局,如何实现它内部的单行文本垂直居中?
前提:容器的heigh:50%;容器内部就一行文本,不再添加标签让内部的文本垂直居中
<body>
<div style='height:50%'>
一行文本
</div>
</body>
容器高度是百分比布局,如何实现它内部的单行文本垂直居中?
前提:容器的heigh:50%;容器内部就一行文本,不再添加标签让内部的文本垂直居中
<body>
<div style='height:50%'>
一行文本
</div>
</body>
使用绝对定位
父容器设置 position: relative;
子容器设置 position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
其实垂直居中有好多方法http://blog.csdn.net/freshlover/article/details/11579669
3 回答1.5k 阅读✓ 已解决
4 回答1.4k 阅读✓ 已解决
2 回答1k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
4 回答1.6k 阅读
2 回答1.2k 阅读✓ 已解决
1 回答1.2k 阅读✓ 已解决
1.用伪类的方式 可以参照 http://segmentfault.com/q/1010000003009506/a-1020000003009554
2.父元素使用padding
3.父元素display:table;子元素display:table-cell;然后设置子元素 vertical-align:middlel;