css居中问题

1、水平居中

1.1、行内元素直接水平居中（text-align）

text-align:center;

只要父元素设置该属性值，所有的行内子元素都会水平居中。且该属性有继承性

 

2、确定宽度的块级元素实现水平居中

2.1、自动边距实现水平居中（margin）

margin: 0 auto;

具有宽度的块级元素设置上面属性后就会在父元素中左右居中

 

2.2、绝对定位和负边距实现水平居中（absolute+margin）

.parent {
  position: relative;
}

.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  left: 50%;
  margin-left: -75px;
}

将父元素定位为 relative，子元素定位为 absolute，子元素就会相对于父元素进行定位，left 设为50%，margin-left 为宽度的一半，由此实现了左右居中。

 

2.3、绝对定位和0实现居中（absolute+left+right+top+bottom）

该方法可实现垂直水平居中

.parent {
　 display: relative;
}
.children {
  width: 150px;
  height: 150px;
  background: #d780c9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

将子元素设为 position: absolute + （left=0+top=0+right=0+bottom=0）+ margin: auto，将父元素定位为 relative，由此子元素将会在父元素中垂直水平居中。如果父元素没有相对定位，则该元素相对于整个窗口垂直水平居中。

3、不确定宽度的元素实现水平居中

3.1、绝对定位和transform实现水平居中（absolute+transform）

.children {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

 

3.2、flex 布局实现水平居中

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

 

3.3、table 加自动 margin 实现左右居中（table+margin）

.children {
  display: table;
  margin: 0 auto;
}

在某一元素中设置display为table，左右外边距自动，由此可实现在父元素中左右居中。

 

3.4、设为行内元素实现水平居中（inline-block+text-align）

.parent {
  text-align: center;
}
.children {
  display: inline-block;
  /*或者： display: inline; */
}

子元素设为行内元素，父元素通过属性 text-align 设置行内元素居中。

 

4、垂直居中

4.1、flex实现垂直居中

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

 

4.2、绝对定位和负边距（absolute+margin）

.parent {
  position: relative;
}
.children {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  margin-top: -75px;
}

 

4.3、table-cell实现垂直居中（table-cell+vertical-align）

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

由此父元素中的子元素全部都实现了垂直居中

 

4.4、绝对定位和0

参考上面的2.3

4.5、绝对定位和transform

参考上面的3.1

详细参考：https://blog.csdn.net/dengdongxia/article/details/80297116