网页设计的垂直居中

推荐阅读原文

原文链接: 网页设计的垂直居中

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

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


你可能感兴趣的:(css,css3,网页设计,前端,垂直居中)