网页设计的垂直居中

此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。

使用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.