css文本的上下居中 |css超出部分出现滚动条

在网站设计中，大家经常需要将文本垂直居中，这时候就需要使用 CSS 线框模型的属性来实现。在这篇文章中，大家将介绍常见的上下居中方式和具体实现方法，让你可以轻松实现文本的上下居中效果。 使用 CSS 居中文本的方式： 1. 行高居中 设置行高和文字大小相等即可：

p {
font-size: 40px;
line-height: 40px;
}

2. flex 居中 使用 flex 布局可以轻松实现文本的垂直居中：

.container {
display: flex;
align-items: center;
}

3. position 居中 使用定位加上 transform 可以实现垂直居中：

.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

4. table 居中 使用 table 布局很方便地实现了居中：

.table {
display: table-cell;
vertical-align: middle;
}

通过上述四种方式实现了文本的上下居中效果。在实际开发中需要根据实际情况来选择相应的方法进行使用。希望这篇文章能帮助你更好地实现文本的居中效果。