盒子水平垂直居中的四种方式(详细总结)

最新推荐文章于 2023-11-03 10:33:06 发布

一个橙子呀

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量648

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/hong521520/article/details/104010082

版权

CSS 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

在这里插入图片描述

盒子水平居中的四种方式

第一种

当子盒子有固定宽高的时候这样来使用

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>
<body>
    <div class="father">
        <div class="child">我有宽高</div>
    </div>
</body>

第二种

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        /* 子绝对定位，父相对定位，上左各百分之50
           margin左 上 子盒子宽高的一般 */
    }
</style>
<body>
    <div class="father">
        <div class="child">我有宽高</div>
    </div>
</body>

浏览器效果图
在这里插入图片描述

第三种

当子盒子没有固定宽高的时候这样来使用

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
        /* 给父盒子flex布局 */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: red;
    }
</style>
<body>
    <div class="father">
        <div class="child">我没有宽高</div>
    </div>
</body>

第四种

<style>
    .father{
        width: 500px;
        height: 500px;
        background-color: #ccc;
        position: relative;
    }
    .child{
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<body>
    <div class="father">
        <div class="child">我没有宽高</div>
    </div>
</body>