css常用水平和垂直居中方法总结

垂直居中

内联（*）元素

1. 单行
   1. padding-top=padding-bottom
   2. height=line-height
2. 多行
   1. padding-top=padding-bottom
      但当文本所在的元素是一个表单元格时（无论是html的table还是通过css使其表现为表格）不奏效，可用下面这个方法；
   2. vertical-align:middle;
   3. flexbox
   4. “重影元素”技术,设置一个::before伪元素放置在容器内,height：100%; vertical-align:middle;。

块元素

1. 知道元素高度(也可用于水平居中)：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

2. 不知道元素高度（也可用于水平居中）：

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

3. 允许拉伸容器高度：将父元素设置为表格，子元素设置垂直居中

.parent {
  height: 300px;
  margin: 20px;
  padding: 20px;
  width: 300px;
  position: relative;
  display: table;
}
.child{
  background: black;
  color: white;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
}

4. 使用flexbox

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

水平居中

内联（*）元素

块元素内的行内元素：text-align:center;适用于内联、内联表、内联flex、内联块等

块元素

除了在块垂直居中说的两个也可用于水平居中的方法外，还有:

1. margin: 0 auto;
2. 多个块元素并行
   1. inline-block
   2. flexbox

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

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

水平、垂直都居中

除了上述方法组合外，还有：

1. flexbox

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

2. grid

body, html {
  height: 100%;
  display: grid;
}
span { 
  margin: auto;
}

总结

基本就是：text-align \ vertical-align \ margin: auto \ asolute + 负值margin \ absolute + translate \ flexbox \ grid ，注意它们使用的条件。
参考CSS-trick: Centering in CSS: A Complete Guide