css水平垂直居中方法

居中的问题只要是前端面试，基本上都会问的css问题，高级点的像什么双飞翼布局，圣杯布局，记不住的话百度也很多，但是居中这个问题，至少会两个常见的，总不能啥都百度吧！！

1.display：table-cell方法

<style>
       .father{
           width:400px;
            height:200px;
            border:1px solid #000;
            display:table-cell; /*需*/
            text-align:center; /*需*/
            vertical-align:middle; /*需*/
        }
        .son{
            width:200px; 
            height:100px; 
            background:red;
            display:inline-block; /*需*/
        }
  </style>
 <div class="father">
        <div class="son">
            居中
        </div>
 </div>

1.jpg

注意的是：
如果使用table-cell就不要使用其他的定位了，例如float，position：absolute，如果非要用，那么可以在father上面在加一个父div定义float等属性；设置了table-cell的元素对宽度和高度敏感（在父元素上设置table-row等属性，也会使其不感知height。），对margin值无反应，响应padding属性

附带一个需求：如果想让这个father的div一直垂直在页面中央怎么办，页面怎么缩放都在中间

<style>
 /*上面的代码附带上*/
      html,body{
          height:100%; /*目的是让这个大的father 的div在页面正中央，去掉的话只能是在水平居中*/
          margin:0;
          padding:0;
      }
        #boxs{
          display:table; 
          width:100%;
          height:100%;
      }
  </style>
 <div id="boxs">
    <div class="father">
          <div class="son">
                        居中
          </div>
      </div>
 </div>

2.display：flex弹性布局

   <style>
        .father{
            width:400px; 
            height:400px; 
            border:1px solid #000;
            display:flex;  /*需*/
            align-items:center; /*需 垂直方向的元素位置*/
            justify-content:center; /*需 --定义水平方向的元素位置*/
        }
        .son{
            width:200px;
            height:200px; 
            background:red;
        }
    </style>
    <div class="father">
          <div class="son">
                        居中
          </div>
     </div>

1566293010(1).jpg

注意的是：
display:flex是C3高级的，有点需要兼容性

3. 绝对定位 +margin也是最常用的

    <style>
        .father{
            width:400px; 
            height:400px; 
            position:relative; /*需*/
            border:1px solid #000;
        }
        .son{
            width:200px; 
            height:200px; 
            background:red; 
            position:absolute; /*需*/
            left:0; /*需*/
            top:0; /*需*/
            bottom:0; /*需*/
            right:0; /*需*/
            margin:auto;/*需*/
        }
    </style>
    <div class="father">
        <div class="son">
            居中
        </div>
    </div>

图略 同上
注意的是：
left.top.bottom.right.margin:auto一个都不能少， margin: auto;作用其实是把div剩余的空隙平均匀了

4.同上 --绝对定位+，但是用的是transform

    <style>
        .father{
            width:400px; 
            height:400px; 
            position:relative; 
            border:1px solid #000;
        }
        .son{
            width:200px; 
            height:200px; 
            background:red; 
            position:absolute; 
            left:50%; 
            top:50%; 
            transform: translate(-50%, -50%);
        }
    </style>
     <div class="father">
        <div class="son">
            居中
        </div>
    </div>

注意的是：
这种方法兼容性依赖translate2d的兼容性

5.绝对定位+margin反向偏移，感觉实用性不是很大

 <style>
        .father{
            width:400px; 
            height:400px; 
            position:relative; 
            border:1px solid #000;
        }
        .son{
            width:200px; 
            height:200px; 
            background:red; 
            position:absolute; 
            left:50%; 
            top:50%; 
            margin-left:-100px; 
            margin-top:-100px;
        }
</style>
<div class="father">
    <div class="son">
        居中
    </div>
</div>

注意的是：
margin值的设置不能使用百分比，因为margin是基于父元素的宽度来计算百分比的，由于top、left偏移了父对象的50%宽度高度，所以需要利用margin反向偏移居中块的50%宽高
这里的margin具体参数是怎么来的：
margin-left:-(width+padding)/2+'px';
margin-top:-(height+padding)/2+'px';