水平垂直居中方法总结

工作中经常用到水平垂直居中的方法，尤其是垂直居中，其中有非常多的学问，一直疏于总结，今天儿周末，来review一下：

　　HTML结构：

       <div class="container">
            <div class="content"></div>
       </div>

        .container{
            background-color: #4EA46A;
            height: 200px;
            width:80%;
        }
        .content{
            height:100px;
            background-color: #2E5F3F;
        }

• 绝对居中法（一）一——absolute + margin 负值  实现水平垂直居中

          .content{
　　　　　　　　width : 100px;
              position: absolute;
              left:50%;
              margin-left:-100px;/*content宽度的一半*/
              top:50%;
              margin-top:-50px;
          }

　　限制条件：需要知道元素宽高的值;

　　这里附带一个小的知识点：CSS中margin-top/bottom(padding-top/bottom)百分比以最近的块级祖先元素的宽度而不是高度为基准

• 绝对居中法（二）absolute + margin：auto   实现水平垂直居中

　　平时蛮多时候都使用 margin:0 auto 来水平居中，但实际上这种方法也可以实现垂直居中，我也是才知道~ 来看看下面的代码:

        .container{
            background-color: #4EA46A;
            height: 200px;
            width:50%;
            margin: 100px auto;
            position: relative;
        }
        .content{
            width: 80%;
            height:50%;
            background-color: #2E5F3F;
        }
        .content{
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

　　这种实现绝对居中方法的工作机制如下所示：

1. 在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0
2. position:absolute  使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染
3. 为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素（body或定位为relative的元素）的所有可用空间
4. 给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto
5. 由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中

• 　　table-cell居中

　　使用table的特殊属性——table-cell在设置为vertical-align:middle之后，单元格内容位于所在行中间显示的原理，进行垂直居中；

　　限制：需要为居中元素增加一个额外wrapper：

 <div class="container">
        <div class="contentWrapper">
            <div class="content"></div>
        </div>
 </div>

CSS代码如下：

        .container{
            display:table;
        }
        .contentWrapper{
            vertical-align: middle;
            display: table-cell;
        }
        .content{
            width: 100%;
            height:50%;
            background-color: #2E5F3F;
        }

• inline-block居中：

　　CSS-Trick中相应文章 https://css-tricks.com/centering-in-the-unknown/  通过伪类元素撑开高度，结合inline-block和vertical-align:middle实现垂直居中：

　　其原理如下：

<div class="container">
        <div class="content">What‘s past is prologue</div>
    </div>

        .container2{
            text-align: center;
        }
        .container2:before{
            content: ‘‘;
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            margin-right:-0.25em;/*调整位置*/
        }
        .content2{
            display: inline-block;
            vertical-align: middle;
            line-height:40px;
            color: #2E5F3F;
            border:1px solid #2E5F3F;
        }

　　这种方法的优势在于：可以再不知道父元素及子元素的宽度的基础上进行居中

　　限制：当子元素宽度很长，接近100%时将会被挤到顶部（after伪元素）或　挤出容器（before伪元素）

　　　　　需设置如 max-width:calc(100% - 0.5em)的最大宽度进行限制

• flex布局

　　使用流体布局之后发现这才是真正的水平垂直居中好嘛？

        .container3{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align:center;
            -webkit-align-items:center;
            -ms-flex-align:center;
            align-items:center;
            -webkit-box-pack:center;
            -webkit-justify-content:center;
            -ms-flex-pack:center;
            justify-content:center;
        }

　　默认主轴为横轴：justify-content定义弹性项目在当前行上沿主轴的排列方式，align-items沿侧轴的排列方式

　　限制：兼容问题：IE11+支持

　　常用的水平垂直居中的方式总结这么多先