Saber2pr's Blog

垂直居中

1. table + vertical-align

基于基线(四线三行)

.parent {
  display: table;
}

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

2. transform

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%; /* absolute定位参照物是父容器 */
  transform: translateY(-50%); /*translate的参照物是自身 */
}

如果子元素宽度知道，也可以把 translateY 换成 margin-top 负边距(偏移自身一半)

3. align-items:center

flex 容器

不兼容 IE10 以下

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

/*或者*/
.child {
  align-self: center;
}

4. line-height

子元素行高设置为父元素高度

.parent {
  height: 100px;
}

.child {
  line-height: 100px;
}