水平居中垂直 / 垂直居中是前端開發中常見的需求，今天就總結一下各式各樣的水平 / 垂直居中，為方面描述，以下代碼中外層div統一類名為.wrapper。

以下代碼均在http://js.jirengu.com/?html,css,js,output 上運行并展示

1. 水平居中

1.1 內聯元素水平居中

在內聯元素的外層div上用text-align: center

.wrapper {
  text-align: center;
}

1.2 定寬塊級元素水平居中

直接margin: 0 auto; 當然上下外邊距可以隨便設 注意必須是固定寬度的塊級元素！

問：為什么？

不是固定寬度的話塊級元素默認為100%父級寬度談何居中？

1.3.1 多個塊級元素水平居中(inline-block方法)

 <div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
 </div>

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  /*為了看的清晰加上外層邊框*/
}
.inner {
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid #ccc;  /*子盒子也加上邊框*/
  display: inline-block;
}

展示效果：

image.png

但這種方法有一個問題！
當頁面寬度不夠時變會變形

image.png

1.3.2 多個塊級元素水平居中(flex-box方法)

用flex布局可以輕松實現多個塊級元素水平居中，并且頁面寬度不夠時不會出現變形，但會調整每個子元素的寬度和高度。

.wrapper {
  display: flex;
  justify-content: center;
}

最終效果：

image.png

寬度不夠時：

image.png

2. 垂直居中

2.1.1 單行文本垂直居中(padding填充)

上下填充高度一致即可

span {
  padding: 10px 0;
}

2.1.2 單行文本垂直居中(行高控制)

在外層元素上設置line-height等于height，如果外層元素未設置高度，會以line-height高度作為高度

.wrapper {
  height: 100px;
  line-height: 100px;
}

2.2.1 多行文本垂直居中(padding填充)

同上。

2.2.2 多行文本垂直居中(table-cell展示)

不做詳細介紹，不常用，需要可以google

2.2.3 多行文本垂直居中(flex)

注意：此方法只在外層元素定高時有效，且flex布局會將內部子元素變成block類型！！！

.wrapper {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

2.3.1 定高塊級元素垂直居中

利用子元素相對父級絕對定位和負邊距

.wrapper {
  position: relative
}
.child {  /*要居中的塊級元素*/
  position: absolute;
  top: 50%;
  height: 100px;  
  margin-top: -50px;  
}

2.3.2 不定高塊級元素垂直居中

將2.3.1的margin-top改為

  transform: translateY(-50%);

2.3.3 任意塊級元素垂直居中(flex)

會將居中元素內的文本也垂直居中

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3. 水平垂直居中

3.1 定高

絕對定位+負邊距

3.2 不定高

絕對定位+transform: translate(-50%,-50%);

3.3 flex

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

3.4 grid布局

尚未學習，可自行Google~