CSS之元素居中

水平方向

行內元素

.center-children {
  text-align: center;
}

適用於行內元素，行內塊元素。

塊級元素

.center-children {
  margin: 0 auto;
}

margin左右設置爲auto，前提條件：元素自己須要設置寬度。

多個塊級元素

按行放置

.center-children{
  display:inline-block;
}
.center{
  text-align: center;
}

將塊級元素設置爲行內元素,父元素內容居中。
還有一種方法是用flex，但只能兼容IE10+。

按列放置

與塊級元素同樣，只是設置多個塊級元素。

垂直

行內元素

.center-children {
  padding-top: 30px;
  padding-bottom: 30px;
}

這裏設置上下padding同樣。只能用於單行的行內元素。

.center-children {
  height: 100px;
  line-height: 100px;
}

行高與高度相等。

多個行內元素

.center{
  display:table;
}
.center-children{
  display:table-cell;
  vertical-align:middle; 
}

父元素設置爲table，子元素設置爲table-cell。垂直居中。

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

直接使用flex，注意兼容性。

塊級元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

使用絕對定位。須要知道子元素的高度。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用絕對定位。不須要知道子元素的高度。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
使用flex。

水平垂直居中

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

思路跟以前同樣。使用絕對定位。須要知道高度。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用絕對定位。不須要知道高度。

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

使用flex。

總結

以上是頁面佈局中，常常須要用到的各類居中方法，網上也有不少技巧，這裏就簡單的總結概括，用到時能夠選用合適的方案。整體來講，在兼容性（兼容IE10以上）容許的條件下，優先選擇flex方法，實現簡單。

參考

http://howtocenterincss.com/
https://css-tricks.com/center...