绝对定位+margin auto垂直居中引发的思考

最新推荐文章于 2024-03-22 10:15:53 发布

溪宁

最新推荐文章于 2024-03-22 10:15:53 发布

阅读量1k

点赞数 8

文章标签： margin css 居中

本文链接：https://blog.csdn.net/qq_38164763/article/details/91360196

版权

本文探讨了CSS中的margin:0 auto用于水平居中的原理，解释了为何在某些情况下居中效果消失，并详细阐述了垂直居中无法通过margin自动实现的原因。此外，文章还介绍了其他几种常见的居中方法，包括绝对定位、负margin、transform、flex布局等。

摘要由CSDN通过智能技术生成

1、问题由来

如何居中一直是前端开发一个比较有意思的问题，估计每个做前端开发的人都能说出几种方法来。但是不知道各位有没有想过背后更深一点的东西。下面我将借着本篇博客对使用margin居中的问题阐述一下自己的见解。

2、如何居中

水平居中

首先我们来讨论一下水平居中的情况。
实现起来非常简单，使用margin:0 auto即可，我们看如下代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .center {
    
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body style="border: 1px solid black;">
    <div class="center">
        hello world
    </div>
</body>
</html>

得到的效果如下
在这里插入图片描述
这样这个div就被我们居中了，下面我们稍微修改一下代码：

        .center {
   
            margin:0 auto;
            /*width: 300px;*/
            height: 300px;
            /*background-color: red;*/
        }

就变成了下面这样
在这里插入图片描述
为什么居中的效果突然消失了？其实这个问题应该很容易想明白。我们在css样式中去掉了宽度和背景色，那么我们下面加上背景色来看看。

原来并不是div没有居中，你可以理解为div已经居中了，但是因为你没有设置宽度，所以div的宽度就变成了100%。那么他的宽度为什么会变成100%呢？这就涉及到使用margin:0 auto居中的原理了。

使用maring:0 auto居中的原理

这涉及到一个名词：横向格式化属性。那么横向格式化属性是个什么东西？他包含七个属性：margin-left、border-left-width、padding-left、width、padding-rigth、border-right-width、margin-right，这七个属性影响着块级框的横向布局。他们七个的值加起来要等于元素容纳块的宽度，而这个宽度通常就是块级父元素的width值。用公式来表示就是：

margin-left + border-left-width + padding-left + width + padding-rigth + border-right-width + margin-righ = width

这七个值中可以设置为auto的值只有三个，margin-left、margin-right、width，如果把其中一个值设置为auto，其他两个值设置为具体值，那么设为auto的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度，即满足那个等式。
那么你可能会想，如果我把其中两个设置为auto呢？下面我们来讨论这种情况：

把margin-left和margin-right全部设为auto，width设置为具体值，这时候两个外边距的长度相等，具体表现就是元素在父元素中居中显示，也就是我们想要的水平居中效果。

把某一边的外边距和width设置为auto，此时设置为auto的外边距等于0，宽度根据等式计算。举个简单的例子：

        .center {
     
            margin-left: 100px;
            margin-right: auto;
            width: auto;
            height: 300px;
            background-color: red;
        }

此时我们将margin-right设置为了auto，那它就会变成0，由于没有设置border和padding，那么他们默认为0，所以width+margin-left应该等于父元素的宽度，这里我的父元素就是body，所以表现出来应该就是margin-left等于100px然后div占满了剩下的空间，如图
在这里插入图片描述
这就是设置两个auto的情况。

那么还有一种情况，我们把三个值全部设置为auto，这时候会把左右边距全部设置为0，width则是要多宽有多宽。其实这就是我们在上面去掉宽度后显示的结果。因为去掉宽度后宽度的默认值就是auto，你又把左右边距设置成了auto，那么左右边距自然变成0了，这也是为什么居中失效的原因。
接下来你可能会想，那我一个auto都不设置，全部设置成具体值，那你那个等式不就不成立了吗？这种情况在css里面被称作过约束，在这种情况下margin-right会被强制设置为auto。

垂直居中

了解完水平居中，我们现在来讨论一下垂直居中。有了水平居中的经验，你很容易这样想，我垂直居中把它设置为margin:auto 0不就行了吗？真的是这样吗，我们来试一试

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">