四种纯css实现页面元素水平垂直居中的方法

在页面很多地方都需要将某个元素水平和垂直都居中放置，而且在一些公司面试前端的时候，往往会有这样的题目，比如“用至少两种方法实现纯css让元素水平垂直居中效果”，这个话题算老生常谈了。今天主要讨论四种常用的纯css实现元素水平垂直居中的方案：

1、如果要居中的元素已知宽高，可以利用定位和负外边距来实现，具体原理不啰嗦了，大家自己看代码：

<div id="box"></div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     height: 200px;
     background: dodgerblue;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -150px;/*元素高度的一半*/
     margin-top: -100px;/*元素高度的一半*/
  }
 </style>

2、如果元素的宽高已知，还可以这么写（这个写法必须加具体高度）：

<div id="box"></div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     height: 200px;
     background: dodgerblue;
     margin: auto;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
  }
 </style>

3、如果元素宽高未知，可以这样写（利用了css3的属性，不兼容低版本IE）：

<div id="box">我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字,我是用来充数的测试文字</div>
 <style type="text/css">
  * {
     padding: 0;
     margin: 0;
  }
  #box {
     width: 300px;
     background: dodgerblue;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
 </style>

4、如果让某个父级区域（非body）中的子元素水平垂直居中，也可以这样写：

<style type="text/css">
 *{
    padding: 0;
    margin: 0;
 }
 #out{
    width: 800px;
    height: 550px;
    border: 2px solid orange;
    margin: 10px auto;
    /*flex弹性盒模型居中法*/
    display: flex;
    /*让子元素在主轴上居中*/
    justify-content: center;
    /*让子元素在交叉轴上居中*/
    align-items: center;
 }
 #hd{
    width: 400px;
    background: dodgerblue;
 }
 </style>
 <div id="out">
 <div id="hd">后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！后盾人 人人做后盾！</div> 
 </div>

当然，还有其他很多方法，以上四种是比较常用的而已。给大家推荐一篇文章，有兴趣的同学可以学习下：盘点8种CSS实现垂直居中水平居中的绝对定位居中技术（http://blog.csdn.net/freshlover/article/details/11579669）