块级元素:要水平居中对齐一个元素(如
), 可以使用 margin: auto。
文字居中:text-align: center;
文字垂直水平居中:垂直居中 - 使用 line-height,text-align: center;
文字居中:text-align: center;
文字垂直水平居中:垂直居中 - 使用 line-height,text-align: center;
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行,添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
块级元素垂直水平居中的方式
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}