css元素水平居中的几种方法

最新推荐文章于 2022-06-28 23:45:19 发布

WORLDI

最新推荐文章于 2022-06-28 23:45:19 发布

阅读量268

点赞数

文章标签： css

本文链接：https://blog.csdn.net/WORLDI/article/details/106677902

版权

水平垂直居中的写完了，再写写就水平居中的吧，这种问题也经常被问，记录一下，加深一下印象。html结构如下：

<div class="parent">
        <div class="son"></div>
</div>

1.margin + 定宽

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;

}
.son{
    width: 200px;
    height: 100px;
    border: 1px solid red;

    margin: 0px auto;
}

2. table + margin

子元素不定宽

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;
}
.son{
    height: 100px;
    border: 1px solid red;

    display: table;
    margin: 0px auto;
}

3.inline-block + text-align

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;

    text-align: center;
}
.son{
    width: 200px;
    height: 100px;
    border: 1px solid red;

    display: inline-block;
}

4. absolute + margin-left

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;

    position: relative;
}
.son{
    width: 200px;
    height: 100px;
    border: 1px solid red;

    position: absolute;
    left: 50%;
    margin-left: -100px;
}

5. absolute + transform

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;

    position: relative;
}
.son{
    width: 200px;
    height: 100px;
    border: 1px solid red;

    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

6. flex + justify-content

.parent{
    width: 600px;
    height: 400px;
    border: 1px solid black;

    display: flex;
    justify-content: center;
}
.son{
    width: 200px;
    height: 100px;
    border: 1px solid red;
}