CSS居中方案介紹

1. 水平居中

1.1. transform居中

通過transform居中的核心思想是讓居中元素先通過margin-left屬性向右移動50%，然後再利用transform屬性左移元素寬度的一半，從而達到居中的效果：

.parent {
  position:relative;
  width: 300px;
  height: 400px;
  background-color: red;
}

.child {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  left: 50%;
  transform: translateX(-50%);
}

<div class="parent">
  <div class="child"></div>
</div>

1.2. flex居中

利用flex居中是一種更為簡單的方式，通過設定父元素的justify-content為center即可。

.parent2 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  justify-content: center;
  background-color: red;
}

.child2 {
  background-color: yellow;
}

<div class="parent2">
  <div class="child2">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

1.3. inline-block

通過將塊級子元素設定inline-block屬性，然後再將父元素的text-align屬性設定為center即可：

.parent1 {
  text-align: center;
  width: 300px;
  height: 30px;
  background-color: red;
  margin-top: 30px;
}

.child1 {
  display: inline-block;
  background-color: yellow;
}

<div class="parent1">
  <div class="child1">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

1.4. margin居中

通過設定子元素的margin來使其居中：

.parent3 {
  position:relative;
  width: 300px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

.child3 {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  background-color: yellow;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<div class="parent3">
  <div class="child3">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

2. 垂直居中

2.1 translate居中

.parent4 {
  position:relative;
  width: 300px;
  height: 400px;
  background-color: red;
  margin-top: 20px;
}

.child4 {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent4">
  <div class="child4">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

同樣的，結合1.1就可以實現水平、垂直居中：

.parent5 {
  position:relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin-top: 20px;
}

.child5 {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  height: 200px;
  background-color: yellow;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
}

<div class="parent5">
  <div class="child5">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

2.2 flex居中

利用flex的align-items屬性可以解決flex的垂直居中：

.parent6 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: red;
}

.child6 {
  background-color: yellow;
}

<div class="parent6">
  <div class="child6">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

同樣的，結合1.2可以做到水平、垂直均居中：

.parent7 {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}

.child7 {
  background-color: yellow;
}

<div class="parent7">
  <div class="child7">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

2.3 絕對定位

利用絕對定位同樣可以實現垂直居中：

.parent8 {
  position:relative;
  width: 300px;
  height: 200px;
  background-color: red;
  margin-top: 20px;
}

.child8 {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  height: 100px;
  background-color: yellow;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
<div class="parent8">
  <div class="child8">fsdjfklajsdklfklasjfkljksdlf</div>
</div>

再參考1.4的方案，可以做到水平，垂直均居中：

.parent9 {
  position:relative;
  width: 300px;
  height: 200px;
  background-color: red;
  margin-top: 20px;
}

.child9 {
  position: absolute; /*第一個position不為static的父元素為其父元素*/
  width: 200px;
  height: 100px;
  background-color: yellow;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0px;
  margin: auto auto;
}

<div class="parent9">
  <div class="child9">fsdjfklajsdklfklasjfkljksdlf</div>
</div>