常用样式——水平垂直居中完全总结

我在实现水平垂直居中的方式有这样一个过程：

1、学习前端之初，认识了margin:auto,它可以完美实现block元素的水平居中，但是也有一个疑问，为什么只是能实现水平居中但是不能实现垂直居中呢？（下文说明原因）
2、既然margin:auto实现不了水平垂直居中，那么想要实现该怎么办呢？

.container{
    width:1000px;
    height: 500px;
}
.item{
    width:200px;
    height:200px;
    position: absolute;
    left:50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

这段代码是我最早接触到的能够实现水平垂直居中的方式，但是用了一段时间之后我发现如果居中元素的宽高未知的时候这种方式就不管用了。于是我又寻求新的方式。
3、发现了transform方式：

.container{
    width:1000px;
    height: 500px;
}
.item{
    width:200px;
    height:200px;
    background:red;
    position: absolute;
    left:50%;
    top: 50%;
    transform:translate(-50%, -50%);
}

遗憾的是我当时还在开发着需要兼容IE8的产品，所以不得不放弃了这种方式，继续寻求。
4、于是，我发现了完美的方法

.container{
    width:1000px;
    height: 500px;
}
.item{
    width:200px;
    height:200px;
    background:red;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
}

没错，你又看到了margin:auto;我在一开始说到的只能实现水平居中不能实现垂直居中的margin:auto;在上边这段又出现了，而且完美实现了垂直居中。看代码你会发现多了绝对定位，并且将绝对定位上下左右偏移都设为0，这样margin:auto也会在垂直方向生效，为什么呢？
我来试着解释一下：
首先，我们知道div这类流体元素的宽度是填满父级元素的，也就是说相对父级来计算宽度，而居中也是相对父级元素计算的，margin:auto可以完美平分水平方向的剩余空间。但是div的高度却与父级元素无关，它是靠子元素的高度撑起来的，所以没有所谓的剩余空间。那么，接下来的绝对定位又干了什么呢？我们知道绝对定位可以相对它设置过定位的父元素来定位，但是它具有“包裹性”，也就是宽高都被子元素的内容撑开，这时，通过设置 left/right/top/bottom为0，可以取消这种“包裹性”，使元素的宽高受控于父级元素。这就符合margin:auto的使用条件，从而实现水平垂直居中。
5、flex方式
最后我们不得不说一下flex方式的水平垂直居中，简洁而容易理解：

.container{
    width:1000px;
    height: 500px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.item{
    width:200px;
    height:200px;
    background:red;
}

至此，我所知道的水平垂直居中方式都已包含在上，日常应用也足够。

---

参考：
https://segmentfault.com/q/1010000000689833
https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/