css在页面中垂直居中显示

CSS是网页设计中必不可少的一部分，它可以让网页更加美观和易于操作。其中一项常见的需求就是让元素在页面中垂直居中显示。接下来，我们将介绍各种方法，让你轻松实现这种效果。

/* 方法一：利用flex布局 */.parent {
    display: flex;
    justify-content: center;
     /* 水平居中 */align-items: center;
 /* 垂直居中 */}
/* 方法二：利用display和position */.parent {
    position: relative;
    display: table;
    height: 100%;
 /* 创建100%高度的空白区域 */}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/* 方法三：利用absolute和translate */.parent {
    position: relative;
    height: 100%;
 /* 创建100%高度的空白区域 */}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 方法四：利用line-height */.parent {
    height: 300px;
    line-height: 300px;
     /* 确保和高度一致 */text-align: center;
 /* 水平居中 */}
.child {
    display: inline-block;
    vertical-align: middle;
 /* 垂直居中 */}
/* 方法五：利用table布局 */.parent {
    display: table;
    height: 400px;
}
.child {
    display: table-cell;
    vertical-align: middle;
     /* 垂直居中 */text-align: center;
 /* 水平居中 */}
    

以上就是实现元素在页面中垂直居中显示的五种方法，适用于不同的情况和需求。你可以根据具体情况选择合适的方法，或者结合使用不同的方法，以达到更好的效果。

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