网页设计的垂直居中
![](/img/icons/default_cover.jpg)
网页设计的垂直居中
吴华锦此系列为网页设计中经常使用到的垂直居中解决方法,通过本文进行详细地总结。
使用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.