CSS设置子元素在父元素中水平居中

最新推荐文章于 2024-04-12 01:45:06 发布

嘘……一只bug

最新推荐文章于 2024-04-12 01:45:06 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_43311695/article/details/123048416

前端专栏收录该内容

7 篇文章

订阅专栏

该博客探讨了如何使用CSS将一个元素在父元素中水平居中。通过设置`.inner`的`width`和`margin: 0 auto`，可以实现自动居中效果。这基于CSS布局的原理，要求元素的总宽度等于其父元素的内容区宽度。当`width`固定，两个`margin`自动调整以达到居中。这种方法适用于需要在父容器中居中显示的子元素。

怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 300px;
            background-color: bisque;
        }
        .inner{
            width: 300px;
            height: 100%;
            background-color: aquamarine;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

关键语句：

.inner{
	width:xxxpx;
	margin:0 auto;
}

为什么？

一个元素在其父元素中，水平布局必须满足下面的等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=其父元素的内容区的宽度

以上等式必须满足，否则称之为过度约束，则等式会自动调整：

如果上面的七个值没有一个设置为auto，则浏览器会自动调整margin-right的值以使满足等式
如果width或margin-left或margin-right中有一个设置为auto，则会调整auto为某值
如果width和某一个外边距设置为auto，则width会调整到最大，设置auto的一个外边距被调整为0px
如果width和两个外边距都为auto，则width会调整到最大，两个外边距都是0px
如果width为指定值，两个外边距都是auto，则左右外边距会被调整为相同的值，我们可以利用这一点来使得子元素在父元素中水平居中
其他情况都是会调整margin-right