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中實現。這裏就把它忽略了。