一、使用line-height属性
line-height属性可以用来设定文本行与行之间的距离，同时也能够作为文本垂直居中的一种方式。通过将line-height属性的值设为所在容器的高度，可以使文本垂直居中。
.container {
height: 100px;
line-height: 100px;
}
二、使用display:flex
使用display:flex可以方便地进行文本的水平和垂直居中。通过设置容器的display属性为flex，并设置其子元素的align-items和justify-content属性，可以实现文本的垂直和水平居中。
.container {
display: flex;
align-items: center;
justify-content: center;
}
三、使用position和transform
通过设置文本的position为absolute，并将top和left属性设为50%，再使用transform属性将文本向上移动一半的高度，可以实现文本的垂直居中。
.container {
position: relative;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
四、使用table和vertical-align
使用display:table和display:table-cell可以模拟一个表格来实现文本的垂直居中。通过设置display:table-cell和vertical-align属性可以使文本垂直居中。
.container {
display: table;
}
.container p {
display: table-cell;
vertical-align: middle;
}
五、使用line-box，transform和position
通过将文本包裹在一个span元素内，并使用line-height属性使其垂直居中，再使用transform:translateY(-50%)将其上移一半的高度，再使用absolute属性将其定位在所在容器内部，可以实现文本的垂直居中。
.container {
position: relative;
}
.container span {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
原创文章，作者：MCJLW，如若转载，请注明出处：https://www.506064.com/n/325058.html
微信扫一扫 
支付宝扫一扫 