css在页面中垂直居中

CSS可以通过几种方式实现在页面中垂直居中，下面我们一起来了解吧。

// 方法1：使用表格布局.wrapper {
    display: table;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
// 方法2：使用Flex布局.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
// 方法3：使用绝对定位和margin.wrapper {
    position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
// 方法4：使用CSS Grid布局.wrapper {
    display: grid;
}
.content {
    margin: auto;
    align-self: center;
}
    

以上是四种实现方式，可以根据实际情况选择其中一种。需要注意的是，在使用绝对定位和margin的方法中，要确保父元素有定位属性（如position: relative）。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！