核心提示：1.让 line-height 属性值和 height 属性值相等来设置 p 元素居中.center {line-height: 200px;height: 200px;border: 3px sol...
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>
