CSS垂直居中的方案
CSS垂直居中的常用方案
注意
以下都只针对现代浏览器，未兼容低版本的IE以及其他非主流浏览器。
1. 使用 flexbox（弹性布局）
css
.container {
display: flex; /* 将容器设置为flex布局 */
align-items: center; /* 水平对齐项目并且垂直居中 */
}2. 使用表格布局：
css
.container {
display: table; /* 将容器设置为表格布局 */
}
.centered {
display: table-cell; /* 将要居中的元素作为单元格显示 */
vertical-align: middle; /* 垂直居中 */
}3. 使用绝对定位和 transform 属性：
css
.container {
position: relative; /* 相对于该容器进行定位 */
}
.centered {
position: absolute; /* 绝对定位 */
top: 50%; /* 距离上边界的百分比值 */
left: 50%; /* 距离左边界的百分比值 */
transform: translate(-50%, -50%); /* 通过transform属性来微调位置 */
}4. 使用 line-height 属性：
css
.container {
height: 200px; /* 指定容器高度 */
text-align: center; /* 文本内部居中 */
line-height: 200px; /* 与容器高度保持一致，实现垂直居中效果 */
}本文标签:
本文链接:
https://vscing.com/article/46.html
版权声明:
本文由vscing原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
目录
标签
文章榜