利用绝对定位实现水平垂直居中

最新推荐文章于 2023-04-12 14:31:51 发布

原创最新推荐文章于 2023-04-12 14:31:51 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #垂直水平居中 #margin：auto

html 同时被 2 个专栏收录

14 篇文章

订阅专栏

css

12 篇文章

订阅专栏

博客探讨了如何利用CSS绝对定位实现元素的垂直水平居中。通过分析margin：auto的原理，解释了为何在垂直方向上直接使用margin：auto无法达到居中效果。同时，详细介绍了设置绝对定位并指定top，right，bottom，left为0时，如何配合margin：auto成功实现居中布局。强调了在使用此方法时，需确保子元素有明确的宽高设定。

<style>
    .a {
        height: 200px;
        width: 500px;
        background-color: antiquewhite;
        margin: 0 auto;
        position: relative;
    }
    .b {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color:blue;
    }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

重点讲一下对子div b中css的理解：
1.margin：auto实现居中的原理：自动分配剩余空间。众所周知，仅仅使用margin：0 auto就可以将块级元素水平居中，但是为什么垂直水平居中不能单纯的使用margin：atuo实现呢？因为块级元素默认的width是充满浏览器的一整行，当你给这个block设置了固定的width后（小于100%的宽度），这个block所在的这一行就拥有了可以被分配的剩余空间。但是block的高度默认是由它内部元素决定的，也就是说在整个浏览器窗口的垂直方向上，对于block来说，并不存在可以被分配的其他空间。所以，margin：auto凭借一己之力无法将块元素垂直水平居中。
2.设置绝对定位，并且top，right，bottom，left都为0代表生成了一个和父元素同等大小的边框。因此，在上下左右这四个方向，都存在了可以被分配的空间，所以margin：auto在这个时候就起了作用。（一定要记得给子元素设置宽高，不然在top,right,bottom,left等于0的影响下，子元素会铺满整个父div）。