常用的CSS居中，你真嘟学会了吗？

学会常用的CSS居中方式

居中无疑是切图经常遇到的问题，一方面根筋不同的场景使用合适的居中方式，另一方面能使用简单的居中方式就使用简单的兼容性好的，而不是动不动就用JS算一下。

1.水平居中 - 行内元素或文本

<style>
    .container{
        text-align: center;
    }
</style>
<div class="container">
    <img  src="./dog.png">
    <h1>欢迎来到aithen.cn</h1>
</div>

产生的问题：在最外层container类设置一个text-align属性，导致所有子元素都会继承，假设图片标题下方还有文字描述，那么这个文字描述也会被居中。

解决办法：在文字描述描述中添加text-align:left属性，覆盖父元素的属性。

如果还有更多的子元素也需要这样做，覆盖属性本身就是下策，因此采用下面的办法（margin:0 auto;）。

2.水平居中 - 块级元素

<style>
    .container{
        margin:0 auto;
        width: 50%;
    }
    h1{
        text-align: center;
    }
</style>
<div class="container">
    <img  src="./dog.png">
    <h1>欢迎来到aithen.cn</h1>
    <h6>在一个宁静的小镇上，住着一只名叫“豆豆”的聪明小狗。</h6>
</div>

3.垂直居中 - 单行文本

.center-text {
  height: 100px;
  line-height: 100px;
}

4.垂直居中 - 借助table-cell

<style>
    .container{
        display: table-cell;
        vertical-align: middle;
    }
    h1{
        text-align: center;
    }
</style>
<div class="container">
    <img  src="./dog.png">
    <h1>欢迎来到aithen.cn</h1>
    <h6>在一个宁静的小镇上，住着一只名叫“豆豆”的聪明小狗。</h6>
</div>

使用table-cell的缺点是容器的magin属性失效了，因为margin不适用于表格布局。

解决办法：在container外层再多套一个div容器，然后让这个容器display:block;margin:0 auto;就可以了。

另外一个缺点是table-cell的元素设置宽高为百分比的时候将不起作用，常用的场景是将宽度设置为外层容器宽度的100%。

解决办法：将container的宽度设置成一个很大的值，例如9999px，就达到100%的目的。

table-cell的方法可以兼容到IE8。

该方法也有失效的时候，比如设置container类position:absolute;时，因为设置position:absolute;就会把非flex元素的display强制设置成block类型。

解决办法：在外层再多套一个容器，将absolute作用这个容器。副作用是内层container和height和width为百分比时会失效。

由于上面的原因，导致一种情况不能使用display:table-cell垂直居中。场景是需要在页面弹个框，这个框的位置需要再当前屏幕中左右上下居中。

解决办法：使用relative定位，设置top为50%，再设置margin-top为元素高度的负的一半。

<style>
    .container{
        width: 200px;
        height: 200px;	
        display: table-cell;
        vertical-align: middle;
    }
    h1{
        text-align: center;
    }
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .outer{
        position: relative;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>
<div class="mask">
    <div class="outer">
        <div class="container">
            <!-- <img  src="./dog.png"> -->
            <h1>欢迎来到aithen.cn</h1>
            <h6 >在一个宁静的小镇上，住着一只名叫“豆豆”的聪明小狗。</h6>
        </div>
    </div>
</div>

上面的缺点是需要知道高度，无法根据内容长短自适应。所以可以使用transform方法。

5.水平和垂直居中 - 使用定位和转换

.outer{
    position: relative;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%,-50%);
}

为了提高兼容性，需要添加-webkit-前缀。

上面的两种办法：margin-top一个负值和translate-50%都有一个潜在的弊端。本来应该在一行的显示的p元素可能会换行。因为在一个relative元素里面absolute定位的子元素会通过把行内元素换行的方式，尽可能不超过容器的边界。由于设置left50%，导致p元素超了边界，所以换行了。

<style>
    .container{
        width: 200px;
        position: relative;
    }
    .nav{
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        bottom: 0;
    }
</style>
 <div class="container">
     <h1>欢迎来到aithen.cn</h1>
     <p class="nav"><span>豆豆</span><span>聪明</span><span>小狗</span><span>宁静</span><span>小镇</span></p>
</div>

解决办法：如下

6.水平和垂直居中 - 使用flex

.nav{
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

flex的痛点是IE不支持，即时是IE11.

7.垂直居中 - 借助伪元素

<style>
    .container{
        width: 100%;
        height: 100%;
    }
    .container:before{
        content: "";
        vertical-align: middle;
        display: inline-block;
        height: 100%;
    }
</style>
<div class="container">
	<img  src="./dog.png">
</div>

8.垂直居中 - 借助定位和margin

<style>
    .container{
        position: relative;
    }
    .container img{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class="container">
	<img  src="./dog.png">
</div>

如果图片比container大，这种方法就不适用了。

有种占满布局场景：照片一边和container一样高，另外一边按照图片的比例缩放，照片居中显示，超出的截断。

可以这么做：只需要把left/right/top/bottom设成一个很大的负值。

<style>
    .container{
    	overflow: hidden;
    }
    .container img{
        position: absolute;
        left: -9999px;
        top: -9999px;
        right: -9999px;
        bottom: -9999px;
        margin: auto;
    }
</style>
<div class="container">
	<img  src="./dog.png">
</div>