CSS详解水平和垂直居中

水平居中

行内和行内块级元素水平居中

text-align: center;

一个块级元素水平居中或多个块级元素竖直排列水平居中

margin: 0 auto;

多个块级元素横向排列水平居中

设置父元素flex布局

display: flex;
justify-content: center;

垂直居中

行内和行内块级元素垂直居中

1.子元素使用相同内边距撑开父元素

  padding-top: 30px;
  padding-bottom: 30px;

2.使高度和行高相等（字符本来就在行高内垂直居中了，只是行高与文字的盒子高度不等，导致不能在盒子里垂直居中）

  height: 100px;
  line-height: 100px;

3.使用vertical-align

vertical-align: middle;

4.设置父元素flex布局

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

块级元素垂直居中

1.块级元素高度已知，使用子绝父相，上外边距为负高度的一半

.parent {
    position: relative;
}
.child {
    position: absolute;
    height: 100px;
    top: 50%;
    margin-top: -50px;
}

2.块级元素高度未知，使用子绝父相和transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

3.使用flex布局

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

水平垂直居中

1.宽度高度已知

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

2.宽度高度未知

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.使用flex布局

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

4.使用gri布局，这里不阐述