摘要：擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來越多的人已開始關(guān)注和使用它注意上面的例子中必須為元素設(shè)置寬度，并且寬度必須小于父容器的寬度絕對(duì)定位實(shí)現(xiàn)垂直居中或者自身高度的一半

在塊級(jí)父容器中設(shè)置text-align:center

塊級(jí)元素設(shè)置margin-left和margin-right為auto（前提是已經(jīng)為元素設(shè)置了width）

display: flex;
justify-content: center;

display: flex;
flex-direction: column;
align-items: center;

width: 寬度值;
position: absolute;
left: 50%;
transform: translateX(-50%); 或者 margin-left: -寬度值的一半;

設(shè)置父容器的height和line-height為相同的值

height: 50px;
line-height: 50px;

  
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來越多的人已開始關(guān)注和使用它

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}

display: flex;
flex-direction: column;
justify-content: center;

或者

display: flex;
align-items: center;

  
React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來越多的人已開始關(guān)注和使用它

注意：上面的例子中必須為p元素設(shè)置寬度，并且寬度必須小于父容器的寬度

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.container p {
  width: 190px;
  display: inline-block;
  vertical-align: middle;
}
.container:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

position: absolute;
top: 50%;
transform: translateY(-50%); 或者 margin-top: -自身高度的一半;