实现垂直居中的几种方法介绍
程序员文章站
2024-02-05 18:50:16
1.让 line-height 属性值和 height 属性值相等来设置 p 元素居中
.center {
line-height: 200px;...
1.让 line-height 属性值和 height 属性值相等来设置 p 元素居中
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } <p class="center"> <p>我是垂直居中的。</p> </p>
2.使用transform属性来设置垂直居中:
.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } <p class="center"> <p>我是水平和垂直居中的。</p> </p>
3.利用Padding
.center { padding: 70px 0; border: 3px solid green; } <p class="center"> <p>我是垂直居中的。</p> </p>
上一篇: Flash动画制作_经典问答20条