css之DOM元素左右垂直居中

对于DOM居中大家都不陌生，几乎开发pc或者移动端多会遇到这个问题，但是css对DOM居中是有很多种方法的，下面我来总结下。

1.第一种情况是父级高度宽度不确定

//display:flex

 <div id="box">
     <div id="inner">
          内容
     </div>
  </div>

#box{
       width: 300px;
       height: 300px;
       background: #999;
       display: flex;
      justify-content:center;
      align-items:Center;
    }
    #inner{
       width: 100px;
       height: 100px;
       background:green;
    }

方法一浏览器效果

//通过定位子级，宽高和top left 设置百分比 等于100%
 <div id="box">
     <div id="inner">
          内容2
     </div>
  </div>

  #box{
       width: 300px;
       height: 300px;
       background: #999;
       text-align: center;
       position: relative;
    }
    #inner{
       position: absolute;
       top: 30%;
       left: 30%;
       width: 40%;
       height: 40%;
       background:green;
    }

方法二浏览器效果

2.第二种情况是父级宽度高度确定

//利用定位加css3 transform

  <div id="box">
     <div id="inner">
          内容
     </div>
  </div>

   #box{
       width: 300px;
       height: 300px;
       background: #999;
       position: relative;
    }
    #inner{
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100px;
       height: 100px;
       background:red;
       transform:translate(-50%,-50%);
       -ms-transform:translate(-50%,-50%);
       -webkit-transform:translate(-50%,-50%);
    }

方法一浏览器显示效果

//绝对定位和负边距

  <div id="box">
     <div id="inner">
          方法二
     </div>
  </div>

    #box{
       width: 300px;
       height: 300px;
       background: #999;
       position: relative;
    }

    #inner{
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100px;
       height: 100px;
       background:red;
       margin-top: -50px;//自己高度的的一半
       margin-left: -50px; //自己宽度的一半
       text-align: center;
    }

方法二浏览器效果

//table-cell

 <div id="box">
     <div id="inner">
          方法三
     </div>
  </div>

  #box{
       width: 300px;
       height: 300px;
       background: #999;
        display: table-cell;
        vertical-align: middle;
        text-align: center;  
    }
    #inner{
       margin: 0 auto;
       width: 100px;
       height: 100px;
       background:red;
       text-align: center;
    }

方法三到浏览器显示效果