div水平垂直居中的方法总结

近段时间在忙于编写静态页面，常常遇到DIV需要垂直居中的情况，下面针对DIV的水平垂直居中做总结，分享出来，一起探讨，这也是自己知识点记录的一种方式。

我们都知道元素水平居中最好使的是：

margin: 0 auto;

元素水平垂直居中：

一，位置定位（元素宽高已知）

1.父元素：position：relative;

2.子元素：position：absolute; 距上50％，距左50％，元素的上，左外边距为自身宽高的负1/2。

（兼容性好，但必须知道宽高）

例：

<div class =“boxSet”>
    <div class =“contentSet”> </ div>
</ div> 

.boxSet {
  width：500px;
  height：500px;
  background-color: #FFAD41;
  position：absolute; 
}
.contentSet {
  width：100px;
  height：100px;
  background-color: #F86F14;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

二，位置+变换（元素宽高未知）

1.父元素：position：relative;

2.子元素：position：absolute; 距上50％，距左50％，元素相对自身的偏移度为负50％。

（兼容性不好，支持IE9 +的浏览器）

例：

<div class =“boxSet”>
    <div class =“contentSet”> position + transform </ div>
</div>

.boxSet {
  position: relative;
}
.contentSet {
  position: absolute;
  left: 50%;
  top: 50%; 
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

三，position + margin：auto;（元素宽高已知）

1.父元素：position：relative;

2.子元素：position：absolute;元素距上，下，左，右都为0，元素的margin值为auto。

（兼容性较好，支持IE7 +的浏览器）

例：

<div class =“boxSet”>
    <div class =“contentSet”> </ div>
</div>

.boxSet {
  position: relative;
}
.contentSet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

四、inline-block（若干子元素，且元素宽高已知）

1.设置子元素为行内块元素,让他们都排成一行， display:inline-block；

2.给它的父容器加一个text-align:center的样式，设置行高为父元素的高。

（兼容性较好,这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中）

例：

<div class="boxSet">
    <div class="contentSet"></div>
    <div class="contentSet"></div>
    <div class="contentSet"></div>
</div>

.boxSet{
   width: 500px;
   height: 500px;
   background-color: #FFAD41;
   text-align: center;
   line-height: 500px;
 }
.contentSet{
   width: 100px;
   height: 100px;
   background-color: #F86F14;
   display: inline-block;
 }

五、flex布局（元素宽高未知）

例：

<div class="boxSet">
    <div class="contentSet">flex布局</div>
</div>

.boxSet{
    width: 500px;
    height: 500px;
    background-color: #FFAD41;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contentSet{
    background-color: #F86F14;
  }

六、inline-block+vertical-align+伪类实现（元素宽高未知）

例：

<div class="boxSet">
    <div class="contentSet">inline-block+vertical-align+伪类实现</div>
</div>

.boxSet{
    width: 500px;
    height: 500px;
    text-align:center;
    background-color: #FFAD41;
    height:600px; 
  }
  .boxSet:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-right:-0.25em;
  }
  .contentSet{
    display:inline-block;
    vertical-align:middle;
    max-width: 90%;
    background-color: #F86F14;
  }

七、table-cell

1.table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了。不推荐使用。

（ie8及以下不支持）

例：

<div class="box boxSet">
  <div class="content contentSet">
    <div class="inner"></div>
  </div>
</div>

.boxSet{
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: table;
  }
  .contentSet{
    background-color: #DEB1F8;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .inner {
    background-color: #F5B9F0;
    display: inline-block;
    width: 20%;
    height: 20%;
  }

上面为个人总结，如发现问题的欢迎指出，我会尽快做出修改，^ _ *