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>