CSS垂直居中

1、ling-height

适用场景：单行文字垂直居中，按钮、下拉框、导航栏

将单行文字的行高设定后，文字会位于行高的垂直中间位置。

<div class="content">Long time no see.</div>

.content {
  width: 400px;
  background: #ccc;
  line-height: 100px;
  margin: auto;
}

2、line-height+inline-block

适用场景：多对象的垂直居中

使用line-height做垂直居中

See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.

使用line-height+inline-block做多行文字的垂直居中

See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.

使用:before+inline-block做垂直居中

See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.

使用padding做垂直居中

See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.

使用absolute+margin负值做垂直居中

See the Pen
使用absolute+margin负值做垂直居中 by whjin (@whjin)
on CodePen.

使用absolute+margin auto做垂直居中

See the Pen
使用absolute+margin auto做垂直居中 by whjin (@whjin)
on CodePen.

使用absolute+translate做垂直居中

See the Pen
使用absolute+translate做垂直居中 by whjin (@whjin)
on CodePen.

使用relative+translateY做垂直居中

See the Pen
使用relative+translateY做垂直居中 by whjin (@whjin)
on CodePen.

使用table做垂直居中

See the Pen
使用table做垂直居中 by whjin (@whjin)
on CodePen.

使用display: table-cell做垂直居中

See the Pen
使用display: table-cell做垂直居中 by whjin (@whjin)
on CodePen.

使用flex+align-items做垂直居中

See the Pen
使用flex+align-items做垂直居中 by whjin (@whjin)
on CodePen.

使用flex+:before+flex-grow做垂直居中

See the Pen
使用flex+:before+flex-grow做垂直居中 by whjin (@whjin)
on CodePen.

使用flex+margin做垂直居中

See the Pen
使用flex+margin做垂直居中 by whjin (@whjin)
on CodePen.

使用Flex+align-self做垂直置中

See the Pen
使用Flex+align-self做垂直置中 by whjin (@whjin)
on CodePen.

使用flex+align-content做垂直居中

See the Pen
使用flex+align-content做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+template做垂直居中

See the Pen
使用grid+template做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+align-items做垂直居中

See the Pen
使用grid+align-items做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+align-content做垂直居中

See the Pen
使用grid+align-content做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+align-self做垂直居中

See the Pen
使用grid+align-self做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+place-items做垂直居中

See the Pen
使用grid+place-items做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+place-content做垂直居中

See the Pen
使用grid+place-content做垂直居中 by whjin (@whjin)
on CodePen.

使用grid+margin做垂直居中

See the Pen
使用grid+margin做垂直居中 by whjin (@whjin)
on CodePen.

使用calc做垂直居中

See the Pen
使用calc做垂直居中 by whjin (@whjin)
on CodePen.

使用writing-mode做垂直居中

See the Pen
使用writing-mode做垂直居中 by whjin (@whjin)
on CodePen.

左图右文版面，文字做垂直居中

See the Pen
左图右文版面，文字做垂直居中-1 by whjin (@whjin)
on CodePen.

See the Pen
左图右文版面，文字做垂直居中-2 by whjin (@whjin)
on CodePen.