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>

centerlayout1.png

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>

centerlayout2.png

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>

centerlayout3.png

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>

centerlayout4.png

同样的，结合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>

centerlayout5.png

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>

centerlayout6.png

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>