1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 使用CSS使div块内容垂直居中的方法

使用CSS使div块内容垂直居中的方法

时间:2024-01-24 09:34:07

相关推荐

使用CSS使div块内容垂直居中的方法

一·line-height

如果内容只有文本,则可以使用line-height属性,值与父级的高度一样就可以实现垂直居中效果

二·div块使用margin

可以在该块使用margin或者margin-top属性将内容顶下来,实现垂直居中

三·使用padding

使用方式跟margin的一样

注意都需要在该div使用,在它的父级使用也可以,但是会有缺陷,如果该div块的高度与父级的高度一样或者高度+margin/padding的高度超过了父级,那么该div块就会跑出父级块,很不美观

四·transform

在该div中输入:

position:relative;

top:50%;

transform:translateY(-50%);

即刻实现垂直居中,并且比较精确,比margin/padding方式要精确

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。