/* 使用 flexbox 实现文字居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}
/* 或者使用 text-align 和 line-height 实现单行文字水平和垂直居中 */
.center-text {
text-align: center; /* 水平居中 */
height: 100vh; /* 设置容器高度 */
line-height: 100vh; /* 行高等于容器高度,实现垂直居中 */
}
display: flex
将容器变为弹性盒子,justify-content: center
和 align-items: center
分别用于水平和垂直居中。这种方法适用于多行文本或复杂布局。text-align: center
实现水平居中,line-height
设置为与容器高度相同,可以实现单行文本的垂直居中。这种方法仅适用于单行文本。如果你需要更复杂的居中方式或其他特定场景,请提供更多细节。
上一篇:css gap
下一篇:css滚动条样式修改
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站