CSS实现水平垂直居中

水平垂直居中

作为一道面试必考题，水平垂直居中多次登上热搜，热度一直不减，作为吃瓜群众，这种大瓜你们确定不过来蹭一波热度吗？
话不多说，直接上瓜

1、为什么要水平垂直居中

中国文化讲究对称,大到帝王的宫殿,小至老百姓的门户、装束,都讲究左右对称，也就是对称美，水平垂直居中作为对称中的对称，美的是一塌糊涂。这么美的东西你确定不学吗？所以学会它就Vans了。

2、水平垂直居中实现方法

以下是经常使用的水平垂直居中的方案：

方案编号	具体实现方案
01	flex弹性布局
02	子绝父相+left+top
03	子绝父相+left+top+right+bottom+margin
04	grid网格布局
05	table-cell

2.1、方案01-flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

将父元素设置为flex容器，然后将其水平方向和竖直方向上的排列方式设置为center。

使用flex容器的属性即可实现水平垂直居中，具体实现代码如下：

<!--html代码如下，后续此部分代码将不再重复-->
<div class="outer">
    <div class="inner"></div>
</div>

/*css部分代码,此部分代码为公共代码，后续此部分将不再重复*/
.outer{
    width: 500px;
    height: 500px;
    background-color: skyblue;
    margin: 100px auto;
}
.inner{
    width: 200px;
    height: 200px;
    background-color: #31c27c;
}

flex方案实现代码：

.outer{
	/*flex代码*/
    display: flex;
    align-items: center;
    justify-content: center;
}

优点：不需要知道子元素的宽高，代码简洁

缺点：兼容性问题，移动端可以很好的兼容，PC端可能会有兼容问题

2.2、方案02-子绝父相+left+top

子绝父相：子元素绝对定位，父元素相对定位。
然后根据其left，top再调整其位置

使用子绝父相可实现水平垂直居中，具体实现代码如下：

02方案实现代码：

.outer{
	position: relative;
}
.inner{
   position: absolute;
   left: 50%;
   top: 50%;
   /*margin负值 为自身宽度的一半*/
   margin-left: -100px;
   margin-top: -100px;
}

优点：兼容性好，代码简洁

缺点：需要知道子元素的宽高

2.3、方案02-子绝父相+left+top

子绝父相：子元素绝对定位，父元素相对定位。
然后根据其left，top再调整其位置

使用子绝父相可实现水平垂直居中，具体实现代码如下：

02方案实现代码：

.outer{
	position: relative;
}
.inner{
   position: absolute;
   left: 50%;
   top: 50%;
   /*使用CSS3的transform特性*/
   transform: translate(-50%,-50%);
}

优点：代码简洁，不需要知道子元素的宽高

2.4、方案02-子绝父相+left+top

子绝父相：子元素绝对定位，父元素相对定位。
然后根据其left，top再调整其位置

使用子绝父相可实现水平垂直居中，具体实现代码如下：

02方案实现代码：

.outer{
	position: relative;
}
.inner{
   position: absolute;
   /*使用CSS3的计算特性，这个减号两边一定要有空格，否则会有语义错误，不能达到想要的效果*/
   left: calc(50% - 100px);
   top: calc(50% - 100px);
}

优点：代码简洁
缺点：可能会有兼容性问题，需要知道子元素的宽高

2.5、方案03-子绝父相+left+top+bottom+right+margin:auto

子绝父相：子元素绝对定位，父元素相对定位。
然后子元素left，top,bottom,right都设置为0，margin设置为auto再移动

使用子绝父相可实现水平垂直居中，具体实现代码如下：

03方案实现代码：

.outer{
	position: relative;
}
.inner{
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}

居中的原理：

left + margin-left + border-left + padding-left + width + padding-right +border-right +margin-right +right = 包含块
width为定值，padding, border默认为0/none，left、right为0，那么margin-left和margin-right为auto，则平分剩余空间，居中。
垂直居中同理

优点：兼容性好，代码简洁

2.6、方案04-grid网格布局

网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

上图就是网格布局的例子，如果对网格布局感兴趣，可以去阮一峰大牛的日志上看一波。下面附上链接
阮一峰的网络日志—网格布局
使用网格布局可以实现水平垂直居中，具体实现代码如下：

04方案实现代码：

.outer{
	display: grid;
}
.inner{
  align-self: center;
  justify-self: center;
}

优点：代码简洁，不需要知道子元素宽高
缺点：可能会有兼容性问题

2.7、方案05-CSS的table

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。

使用子绝父相可实现水平垂直居中，具体实现代码如下：

02方案实现代码：

.outer{
	 display: table-cell;
     text-align: center;
     vertical-align: middle;
}
.inner{
    display: inline-block;
}

优点：代码简洁
缺点：可能会有兼容性问题