20170808- css 居中

jhhfft發表於2017-08-08
CSS

水平居中

行內或類行內元素水平居中

在塊級父容器中設定text-align:center

塊級元素水平居中

塊級元素設定margin-left和margin-right為auto（前提是已經為元素設定了width）

flex佈局實現（多個水平排列元素）水平居中

display: flex;
justify-content: center;

flex佈局實現（多個垂直排列元素）水平居中

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

絕對定位實現水平居中

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

垂直居中

單行行內元素或單行類行內元素垂直居中

設定父容器的height和line-height為相同的值

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

使用table-cell多行文字垂直居中

<div class="container">
  <p>React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它</p>
</div>
.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}

使用flex實現垂直居中

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

或者

display: flex;
align-items: center;

利用偽元素實現垂直居中

<div class="container">
  <p>React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它</p>
</div>

注意：上面的例子中必須為p元素設定寬度，並且寬度必須小於父容器的寬度

.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: -自身高度的一半;

相關文章