1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html怎么水平居中垂直居中 css水平居中和垂直居中的几种解决方案

html怎么水平居中垂直居中 css水平居中和垂直居中的几种解决方案

时间:2019-11-21 20:50:24

相关推荐

html怎么水平居中垂直居中 css水平居中和垂直居中的几种解决方案

有时候,为了前端设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法。

一、水平居中1.1 文本水平居中

文本水平居中

div{text-align:center;}

1.2 元素水平居中

设置 margin:0 auto;,即可让元素居中

元素水平居中

div{margin:0 auto;}

二、垂直居中2.1 单行垂直居中

设置line-height与height的高度相同。

单行垂直居中

div{height:100px;line-height:100px;}

2.2 多行垂直居中

利用 position 和负边距,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。

垂直居中

.parent{position:relative;}.child{position:absolute;top:50%;margin-top:-50px;/*元素自身高度的一半*/height:100px;}

2.3 行内元素垂直对齐

该方法适用于行内元素和单元格(table-cell)元素,常用于行内元素内IMG垂直对齐

图片相对于文字中间对齐

img{vertical-align : middle;}

三、水平&&垂直居中3.1单行文本水平&&垂直居中

单行文本水平&&垂直居中

div{height:100px;line-height:100px;text-align:center;}

3.2元素水平&&垂直居中

垂直居中

.parent{position:relative;}.child{position:absolute;left:50%;top:50%;margin-left:-50px;/*元素自身宽带的一半*/margin-top:-50px;/*元素自身高度的一半*/width:100px;height:100px;}

//或者

.parent{position:relative;}.child{position:absolute;top:50%;margin:-50px auto 0 auto;width:100px;height:100px;}

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