CSS常见的元素居中的方式

水平居中

1.对于行内元素，给父元素设置text-align: center;便可让行内元素水平居中。

.box {
  text-align: center;
}

2.对于固定宽度的块级元素，给该元素设置margin: 0 auto;便可让块级元素水平居中。

.box {
  width:80px;
  margin: 0 auto;
}

3.对于不定宽度的块级元素，将子元素设置为inline-block,再设置父元素text-align:center即可

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

4.利用css3中的flexbox布局让元素水平居中。

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

垂直居中

1.对于行内元素，设置line-height和height一致即可垂直居中。

.box {
  height: 40px;
  line-height: 40px;
}

2.对于不定高度的块级元素，设置父元素display:table;子元素使用css2 table布局让元素垂直居中。

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

3.对于固定高度的块级元素，设置父元素position: relative子元素使用绝对定位实现垂直居中。

.box {
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
}

4.利用css3中的flexbox布局让元素垂直居中。

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

水平居中+垂直居中

1.flex布局可实现垂直水平居中

display: flex;
align-items: center;
justify-content: center;

2.宽高固定

.container {
   position: relative;
   width:100%;
   height:500px;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

3.宽高不固定

.container {
  width:100%;
  height:500px;
  display:table;
  text-align: center;
}
.item {
  display: table-cell;
  vercial-align: middle;
}