元素居中

現(xiàn)在不管是水平居中還是垂直居中都有很多方法實現(xiàn)，但是選擇適合項目的居中方法是一門優(yōu)雅的學(xué)問，下文推薦一些常用的元素居中方法。

水平居中

• text-align

在元素的父元素上設(shè)置text-align: center;使文字/圖片水平居中，也是常用于行內(nèi)元素的一種居中方法。

. container {
  text-align: center;
}

• margin

通常用于設(shè)置塊級元素居中

.container {
  width: 80%;
  margin-left: auto;
  magin-ight: auto;
}

注：一定要設(shè)置寬度，對于塊級元素本身是占據(jù)一整行的，不設(shè)置寬度談不上居中。

垂直居中

• 設(shè)置上下padding相等
  不用設(shè)置高度，高度被內(nèi)容撐開。

.container {
  padding: 40px 0;
  text-align: center;
  background: pink;
}

• 絕對定位實現(xiàn)居中
  
  未對其設(shè)置絕對定位的效果
  
  
  設(shè)置絕對定位的效果
  
  注：先對其設(shè)置 left 和 top: 50%，意為左上角這個點距左邊和上邊都為50%，也就是說這個點在頁面中是水平垂直居中的。而后設(shè)置margin的負值意為元素的寬高的一半，使整個元素水平垂直居中。前提：寬高為固定值！

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
/*元素寬高為固定值*/

.container {
  position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*元素寬高未知，不管元素內(nèi)容有多少，寬高都沒有限制*/
}

• vertical-align
  通常用來讓行內(nèi)元素或表格元素在父容器的基線上對齊。

verical-align: middle;

如何理解基線？

• table-cell
  事實上使對表格元素使用 vertical: middle;
  
  
  缺點：塊級元素使用 table-cell 后就不是塊級元素了，若不寫定寬度，會造成寬度收縮。
• 彈性布局（display: flex;）
  
  
  為了更好的理解彈性布局，推薦以下兩個小游戲：
  青蛙游戲
  塔防游戲

遇到好的居中方法會持續(xù)更新。。。

未完待續(xù)，敬請期待。。。