CSS水平和垂直居中方式

水平居中

text-align: center

对于行内和类行内元素，如链接和文本，可以使用

.element {
  text-align: center;
}

块级元素可使用display: inline-block

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

margin和width

对于块级元素，已经对这个元素设置了一定的宽度width时，可以将margin-left和margin-right设为auto，如果没有设置width，块级元素的宽度会被拉伸为父级容器的宽度。

.element {
  width: 200px;
  margin: 0 auto;
}

使用flex

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

垂直居中

line-height

如果父元素中只有单行文本，可以将子元素的line-height设置为与父元素的高度相同

.parent {
  height: 100px;
}
.child-text {
  line-height: 100px;
  white-space: nowrap;
}

padding-top 和 padding-bottom

如果父元素中只有单行元素，而且父元素没有设置固定的高度，也就是说父元素的高度是由它的内容撑开的，可以将父元素的padding-top和padding-bottom设置为相同的值

.parent {
  padding-top: 30px;
  padding-bottom: 30px;
}

使用绝对定位 + margin-top,margin-left

使用position:absolute，top和left设为50%，margin-left/margin-top分别设置为 -宽高的一半。这种方式的不足之处是需要固定元素的宽高

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

使用绝对定位 + transform的translate函数

这种方法不需要已知元素的宽高，也可以用translateX，translateY

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

使用table-cell + vertical-align

设置父元素为display:table-cell，但父元素有浮动和绝对定位会使这种方法失效

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

使用::before伪元素加vertical-align

.parent::before {
  content: "";
  display: inline-block;
  heihgt: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

使用flex

设置父元素为display: flex, 用justify-content水平居中，用align-items垂直居中

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