一、使用padding和text-align实现
<div class="box">
<p class="content">这是一段示例文本</p>
</div>
.box {
width: 300px;
height: 150px;
border: 1px solid black;
padding: 50px;
text-align: center;
}
.content {
display: inline-block;
}
通过设置padding值使文本与边框之间产生间距，使用text-align属性使文本水平居中，在content元素上设置display为inline-block使文本垂直居中。
二、使用flex布局实现
<div class="box">
<p class="content">这是一段示例文本</p>
</div>
.box {
width: 300px;
height: 150px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
通过设置display为flex，使用justify-content和align-items分别对齐水平和垂直方向上的元素。
三、使用绝对定位和transform实现
<div class="box">
<p class="content">这是一段示例文本</p>
</div>
.box {
width: 300px;
height: 150px;
border: 1px solid black;
position: relative;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
通过设置父元素的position为relative，子元素的position为absolute，使用left和top属性将子元素定位于中心位置，使用transform属性使子元素始终居中。
四、使用table和vertical-align实现
<div class="box">
<p class="content">这是一段示例文本</p>
</div>
.box {
width: 300px;
height: 150px;
border: 1px solid black;
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
通过设置父元素的display为table，子元素的display为table-cell，使用vertical-align属性使文本垂直居中，使用text-align属性使文本水平居中。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/279139.html
微信扫一扫 
支付宝扫一扫 