css3總結之居中

　　居中在前端佈局上很常見，也很經常使用，也是最基本的技巧。居中效果在方向控制上基本能夠分解成水平居中，垂直居中和水平垂直居中。

　　針對調整的元素不一樣，具體的處理方式上有些差別。這裏咱們先不講絕對定位下的居中，絕對定位下的居中方法不少，變化也多。下面講的都是非絕對定位下的方法，原則上有兩個，一個是經常使用，另一個是兼容性最好。

水平居中是居中效果中最多見的，最經常使用的方法莫過於下列兩種：

HTML：

<div class="box">薛定諤的喵！</div>

一、text-align center

.box {
　　text-align: center;
}

 

二、定寬元素 margin: 0 auto;

.box {
    width: 96px;
    margin: 0 auto;  
}

結果天然不言而喻，都是居中的，

若是是對於文本的水平居中更傾向於第一點，由於在第二點上壓根就很差計算文本的寬度，即便計算會有小許的偏差，雖然對文字兼容性上不是很好，卻很適合於按鈕或者是寬度固定的塊狀元素，

反過來須要說明的是第一點也不僅僅是對文字有效，而是對內聯（inline-XX）元素都有效，這個咱們能夠看👇下面這個栗子：

HTML:

<div class="box">
    <div class="inline-box"></div>
</div>

CSS:

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

效果以下：

除了inline-box，同理inline-flex，inline-table，inline-grid都能生效，所以text-align不僅僅能夠用於文本居中，同時也能用於內聯元素居中。

垂直居中經常使用方法也是兩種：

一、行高等高 即：line-height = height

HTML：（仍是剛剛的代碼）

<div class="box">
     <div class="inline-box">薛定諤的喵！</div>
</div>

CSS：

.inline-box {
  line-height: 100px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

二、vertical-align

有些人會說這屬性時好時壞，其實這屬性在display爲inline-block或者table-cell的元素內纔會生效，這點是須要注意噠。（雖然人家名字很好聽，但生效條件也蠻苛刻噠！T_T）

HTML仍是👆上面那個栗子，

CSS：

.inline-box {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  width: 100%;
  height: 100px;
}

 效果圖以下：

若是是inline-block的條件下，這時候就須要動用黑科技（手動滑稽）了，即配合僞類實現垂直居中，效果跟👆那個圖差很少。

LESS：

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
  &:after {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

水平垂直居中也是最多見的居中，具體表如今空白的列表頁，好比電商類App購物車界面，以下天貓App購物車界面，下面列舉幾種經常使用方法

一、盒子模型->flex-box

display爲flex下：

align-items - 垂直方向

justify-content - 水平方向

display爲box下：（通常要帶上私有屬性，如-webkit-box，-moz-box或者-ms-flexbox）

box-align - 垂直方向

box-pack - 水平方向

這個方法有不少瀏覽器的兼容屬性，對於不一樣版本的瀏覽器兼容屬性上還有優先級，

好比有些低版本的webkit內核瀏覽器-webkit-box優先級就比-webkit-flex高，這個坑曾經在低版本的微信瀏覽器出現過。

HTML:

<div class="container">
  <div class="box">
    <div class="inline-box">薛定諤的喵！</div>
  </div>
</div>

LESS:

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
  &:after {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
}
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;

  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

實現效果以下：

本質上是將一個盒子鋪滿屏幕，利用盒子的居中屬性進行自適配居中，這樣一來能夠減輕計算上的工做量而效果達到最優

二、複合水平垂直居中

這裏我是複用vertical-align和text-align屬性，即將上述栗子.container樣式調整以下，固然複用的方法還有不少。

LESS：

.container {
  height: 100vh;
  width: 100vw;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

結果天然同上述結果圖。

這裏咱們須要對這兩種方法進行分析，這兩種方案都是基於當前的界面容器的高度作的絕對居中，但缺點也有的，就是高度都是能夠調整的。若是界面是要求滿屏垂直居中並且界面並無高度動態變化的屬性的話，能夠用這兩種方法。反之，則須要絕對定位屬性作限制（position：absolute），絕對定位下的居中那效果就太多，這裏就不贅述了。