Center

flex

适用场景：子元素宽高不固定、子元素宽高固定


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

grid

适用场景：子元素宽高不固定、子元素宽高固定


#parent {
  display: grid;
  justify-content: center;
  align-items: center;
}


#parent {
  display: grid;
  place-items: center;
}

相对定位

transform 适用场景：子元素宽高不固定、子元素宽高固定


#children {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

适用场景：子元素宽高固定


#children {
  width: 400px;
  height: 300px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-200px, -150px);
}

calc 适用场景：子元素宽高固定


#children {
  width: 400px;
  height: 300px;
  position: relative;
  top: calc(50% - 150px);
  left: calc(50% - 200px);
}

绝对定位

transform 适用场景：子元素宽高不固定、子元素宽高固定


#parent {
  position: relative;
}

#children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

适用场景：子元素宽高固定


#parent {
  position: relative;
}

#children {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200px, -150px);
}

calc 适用场景：子元素宽高固定


#parent {
  position: relative;
}

#children {
  width: 400px;
  height: 300px;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 200px);
}

负外边距适用场景：子元素宽高固定


#parent {
  position: relative;
}

#children {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
}

自动外边距适用场景：子元素宽高固定


#parent {
  position: relative;
}

#children {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

table-cell

适用场景：子元素宽高不固定、子元素宽高固定


#parent {
  width: 800px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#children {
  display: inline-block;
}

line-height

前提：父元素高度固定

适用场景：子元素宽高不固定、子元素宽高固定


#parent {
  line-height: 600px;
  text-align: center;
}

#children {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}