在前端开发和一些面试过程中，经常会遇到关于前端垂直居中定位的问题。一下总结了一些个人在工作中常规的使用方式；都是子节点宽高不定，基于父节点垂直居中定位；
公用css样式：

    html,body {
        padding: 0;
        margin: 0;
    }
    .mt20 {
        margin-top: 20px;
    }
    .wb100 {
        width: 100%;
    }
    .demo1 {
        width: 100%;
        height: 200px;
        position: relative;
        background-color: aqua;
    }
    .red {
        background-color: red;
    }
    .box-size {
        width: 200px;
        height: 100px;
    }

1.绝对定位一

使用绝对定位的方式实现垂直居中；

<!-- position定位1 -->
  <div class="demo1">
      <div class="box1 box-size red"></div>
  </div>

demo1是一个具有宽高尺寸并且相对定位的元素。这时想要.box垂直居中定位只需要使用css3的translate

 /* 可以通过translate实现 IE10以上的场景才支持。移动端开发忽略 */
    .box1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

首先.box1绝对定位，并且左偏移和上偏移父元素的50%；然后使用css的偏移属性，分别使自身在基于自身当前已经偏移后的位置再向左和向上偏移自身宽高的50%；即向右和向下偏移自身宽度的50%；就实现了垂直居中定位的布局；

这种方式弊端在于兼容性不够优秀，需要基于IE10以上的场景才能使用，移动端OK；如果担心兼容性问题可以再往下看；

2.绝对定位二

 <!-- position定位2 -->
     <div class="demo1 mt20">
        <div class="box2 box-size red"></div>
    </div>

从dom来看和之前的结构完全一样只是box1变成了box2；话不多说。贴出box2的样式；

/* 直接使用absolute的定位配合margin:auto也可以实现 */
    .box2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

这个方法就很简单，将上下左右定位全部置为0；之后使用margin:auto居中定位；

3.flex定位

flex定位是移动端的小伙伴经常使用到的布局方式，很棒很优秀。如果对这方面不是太了解的同学，可以阅读下面阮大大的文章，非常简介明了；
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

<!-- flex定位 -->
    <div class="demo-flex mt20">
        <div class="box-flex box-size red"></div>
    </div>

flex的话，实现起来就比较简介明了。。。只需要在父级处理一下就可以。

    .demo-flex {
        display: flex;
        background-color: aqua;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        width: 100%;
        height: 200px;
    }

4.table定位

这个可能是一些古老级玩家比较喜欢的方式，个人使用比较少，但是有些同学还是蛮喜欢使用的贴代码；

   <!-- table定位 -->
    <table  class="wb100 mt20">
        <tr align="center" class="demo-table demo1">
            <td  class="box-table box-size red"></td>
        </tr>
    </table>

    .demo-table {
        display: table-cell;
    }

5.伪类定位

这种使用css3的伪类实现定位，个人使用不太多。在一些特定场景还可以；

 <!-- 伪类定位 -->
    <div class="demo1 demo-c3 mt20">
        <div class="box-c3 box-size red"></div>
    </div>

css

    .demo-c3::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .box-c3 {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
    }

6.grid布局

这是一种全新的布局格式，网格布局；现阶段使用不是特别多，但是有兴趣的小伙伴可以提前关注下。推荐博客：
https://www.cnblogs.com/cythia/p/10894598.html
grid的重点在于网格。下面的例子只展示单一元素的垂直居中定位，可以说只用了毛毛雨的内容，有兴趣的小伙伴，可以看看上面的文章详细了解下。

 <!-- grid布局 -->
    <div class="demo1 demo-grid mt20">
        <div class="box-grid box-size red"></div>
    </div>

 .demo-grid {
        display: grid;
        justify-items: center;
        align-items: center;
    }

这样看起来是不是还和flex有点像。。。好吧常用的垂直居中定位的方式都在这里了。如果有更多好用的方式欢迎与我沟通！谢谢
一下是demo代码地址：
https://github.com/carl-G/CodeRepository/blob/master/html5/posCenter.html

前端垂直居中定位