css元素垂直居中方法

写在前面：很多时候我们需要水平居中时候用margin: 0 auto;但我们要知道，这个方法有很大的局限性，它不能对浮动元素和绝对定位元素居中，而且对于其他元素必须在有width属性时才有作用。

这里说的居中是水平竖直同时居中，就像下面图中这样，而且我们居中的时元素而不是内容。(以下所有方法的结果和下图一样，不再附图)

以下方法如果没有特殊说明，都是基于下面这个部分：

<!-- css 部分 -->
#parent{
  height: 200px;
  width: 300px;
  border: 1px solid #000;
}
#demo{
  height: 100px;
  width: 60px;
  background: blue;
}
<!-- html 部分 -->
<div id="parent">
  <div id="demo"></div>
</div>

行内元素居中（单行）

<!-- css 部分 -->
#parent{
  text-align: center;
}
#demo{
  display: inline-block;
  line-height: 200px;   /*   等于父元素高度   */
}
<!-- html 部分 -->
<div id="parent">
  <div id="demo">Hello</div><!-- 行内元素内部应有内容 -->
</div>

这里应注意，text-align在IE8及以上和其他主流浏览器只能对行内元素居中，但在IE6和IE7中可以对任何元素居中。

利用position定位

知道子元素和父元素大小

• 方法一

 #parent{
    position: relative;
}
#demo{
  position: absolute;
  top: 50px;  /*    计算方法: （父元素高度-子元素高度)/2    */
  left:120px;   /*    计算方法: （父元素宽度-子元素宽度)/2    */
}

• 方法二

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

仅知道子元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;  /*   子元素高度的一半   */
  margin-left: -30px;  /*   子元素宽度的一半   */
}

仅知道父元素大小

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 100px;  /*   父元素高度的一半   */
  left: 150px;   /*   父元素高度的一半   */
  transform: translateX(-50%) translateY(-50%);
}

父元素和子元素大小都不知道

#parent{
  position: relative;
}
#demo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

利用table居中

<!-- css 部分 -->
<!-- css部分继承开头声明部分 -->
#parent{
  text-align: center;
}
#demo{
  display: inline-block;
}
<!-- html 部分 -->
<!-- html部分不同于开头声明部分 -->
<table>
  <tr>
    <td id="parent">
      <div id="demo"></div>
    </td>
  </tr>
</table>

利用display居中

display:table-cell

#parent{
  display:table-cell;
  text-align: center;
  vertical-align: middle;
}
#demo{
  display: inline-block;
}

display:flex

#parent{
  justify-content:center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

还有一种用font-size属性的居中对齐方式，由于只能在IE6，IE7中实现。这里就把它忽略了。