auto到底是什么意思？子盒子在父盒子内实现水平垂直居中的方法大全

我们知道，块级元素即使设置了宽度，也会占满一行，为什么会这样?

因为默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）。即

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

对于绝对定位元素，有以下算式：

left + margin-left + border-left-width + padding-left+width + padding-right + border-right-width + margin-right + right = width of containing block

而auto的作用是：自动填充剩余空间， 所以给div设置margin：auto时，在水平方向上 margin会填充 div这一行中除了left+border-left-width+padding-left+width+padding-right+border-right-width+right的剩余的空间，当左右的margin都设置为auto时，会平分剩余空间，从而实现水平居中。

那为什么不能按照上述同样的方式填充垂直方向上的剩余空间呢？

因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

那用margin：auto可以实现垂直居中吗，答案是肯定的。

.father {
    width: 300px;
    height:150px;
    position: relative;
}
.son {
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0;
    left: 0;
    width: 200px;
    height: 100px;
    margin: auto;
}

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

如果一侧定值，一侧auto，auto为剩余空间大小；

如果两侧均是auto, 则平分剩余空间

因为此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”。即.son这个元素的尺寸自动填充父级元素的可用尺寸。

总结：通过position:absolute 和 top:0 bottom:0将元素设为流体特性的元素，这样该元素可自动填充父级元素的可用尺寸。

格式化宽度：格式化宽度仅出现在“绝对定位模型中”，也就是出现在position属性值为absolute或fixed的元素中。

对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性的祖先元素计算。

“格式化宽度”具有完全的流动性，也就是margin、border、padding、content内容区域同样会自动分配水平和垂直空间。

---

话不多说，我们来看一下到底怎么样才能实现子盒子在父盒子里面垂直居中吧！

方式一：margin;

HTML：

<div class="father">
    <div class="child"></div>
</div>

CSS：

.father{
    width: 400px;
    height: 400px;
}
.child{
    width: 100px;
    height: 100px;
    margin: 150px auto;
}

方式二：display: table-cell;

.father{
    display: table-cell;
    width: 400px;
    height: 400px;
    vertical-align: middle;
    text-align: center;
}
.child{
    display: inline-block;
    vertical-align: middle;
}

方式三：position + margin;

CSS：

.father{
    position: relative;
    width: 400px;
    height: 400px;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

方式四：position + transform;

CSS：

.father{
    position: relative;
    width: 400px;
    height: 400px;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%,-50%);
}

方式五：display: flex;

CSS：

.father{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
}
.child{
    width: 100px;
    height: 100px;
}

————————————————
本篇文章参考了以下两个文章：
原文链接：https://blog.csdn.net/username_xu/article/details/81536356
作者：前端小小生
链接：https://www.jianshu.com/p/302ac93dac26
来源：简书