有时候,为了前端设计的美观,需要把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;}