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