CSS垂直居中的实现

这个问题可以说是老生常谈了，面试时经常问道，一直没整理过，这次做个系统梳理

1、利用display：table实现

从caniuse.com上查到，display：table可以兼容到IE8，以目前环境大部分场合都没问题，上代码

.table{display: table;width: 100%;outline: 1px solid;}
.table>div{display: table-cell;vertical-align: middle;text-align: center;height: 300px;}
.content{outline: 1px solid green;width: 200px;display: inline-block;text-align: left;}

<div class="table">
    <div>
        <span class="content">这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。</span>
    </div>
</div>

适用于内容区宽度，高度不固定的情况

2、利用绝对定位

这是最容易想到的，也是兼容性最好的，但必须知道内容区宽高，上代码

.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.content{width: 200px; height: 150px; outline: 1px solid green;position: absolute;left: 50%;top:50%;margin-left: -100px;margin-top: -75px;}

<div class="absolute-center">
    <div class="content">
        这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </div>
</div>

margin-left: -100px;margin-top: -75px;

替换成

transform: translateX(-100px) translateY(-75px);

也能达到一样的效果，只不过要注意兼容问题

这种方式适合与JavaScript一起使用

3、依然是绝对定位

.container{height: 600px; outline: 1px solid;position: relative;}
.content{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 200px;height: 100px;outline: 1px solid green;margin: auto;}

<div class="container">
    <div class="content">
        这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </div>
</div>

这里要注意的是一定要设置margin为auto，该属性的默认是为0，对于从左往右书写的语言体系，在外边距采用默认值的情况下，会先计算应用left和top值，right和bottom的值将会用包含块（通常是父元素）的宽高减去该元素的宽高以及left和right的值得到，这种情况下是无法得到居中效果的

4、利用height和负外边距

这种方法需要额外增加一个元素

.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.floater{height: 50%;margin-bottom: -75px;}
.content{width: 200px; height: 150px; outline: 1px solid green;background-color: gainsboro;margin: 0 auto;}

<div class="absolute-center">
    <div class="floater"></div>
    <div class="content">
                这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </div>
</div>

5、利用伪元素占位

.container{height: 600px; outline: 1px solid;text-align: center;}
.container::after{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
.content{width: 200px;height: 100px;outline: 1px solid green;display: inline-block;vertical-align: middle;}

<div class="container">
    <div class="content">
        这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </div>
</div>

6、flex

.container{display: flex;text-align: center;height: 400px;outline: 1px solid;}
.content{margin:auto;outline: 1px solid green;}

<div class="container">
    <span class="content">
        这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </span>
</div>

IE edge才实现，其他版本IE都不兼容

7、还是flex

.container{display: flex;justify-content:center;align-items:Center;height: 400px;outline: 1px solid;}
.content{outline: 1px solid green;}

<div class="container">
    <span class="content">
        这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
    </span>
</div>

flex方法适用于移动端