css使元素垂直水平居中

小徐努力中2024-08-16 16:05

在搭建网页的时候，我们往往会让某个元素垂直水平居中来实现自己的布局。本文总结了使元素垂直水平的几种方法，废话不多说直接开始。

使用定位配合transform

给父元素使用相对定位，使子元素在绝对定位时以该父元素为基准。

css 复制代码

.box1{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

.box2{
    width: 150px;
    height: 150px;
    background-color: orange;
    /*使用绝对定位*/
    position: absolute;
    top: 50%;
    left: 50%;
    /* 手动计算自身的宽高的一半 */
    /* margin-top: -75px;
    margin-left: -75px; */
    /* 使用平移变化来 自动计算自身的宽高的一半 */
    transform: translate(-50%,-50%);
}

<div class="box1">
    <div class="box2"></div>
</div>

结果显示：

使用定位配合margin

css 复制代码

.box1{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

.box2{
    width: 150px;
    height: 150px;
    background-color: orange;
    /* 搭配 margin：auto 使用 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

<div class="box1">
    <div class="box2"></div>
</div>

结果显示:

flex布局

css 复制代码

.box1{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    /* 使用弹性布局 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.box2{
    width: 150px;
    height: 150px;
    background-color: orange;
}

<div class="box1">
    <div class="box2"></div>
</div>

结果显示:

以上是一些常见的使元素垂直居中的方法，具体应该根据实际情况选择适合的方法,还有哪些方法呢欢迎补充。