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;}

发表评论

电子邮件地址不会被公开。 必填项已用*标注