如何使用css设置元素垂直居中
既然设置子元素的垂直居中,那就要知道父元素的高度,才能知道这所谓的中在哪,对吧?就像你想在一段距离的中间位置站住,那你首先需要知道这段距离有多长,你才能知道中间位置在哪.
注意,我所有的百分比高宽,都是建立在html,body {width: 100%;height: 100%;}
这样的设置的基础之上的,如果你没有这样设置,.parent这个div的父元素又是body,body你又没有设置宽高,你就可能看不到效果,.parent这个div的高宽比是相对于它的父元素的,所以你在使用的时候需要确定.parent这个div的父元素设置了宽度和高度的.
(1) 行内文本垂直居中
css代码:
.parent { height: 100px; border: 1px solid #ccc; /*设置border是为了方便查看效果*/ } .child { line-height: 100px; }
(2) 行内非文本垂直居中(以img为例)
html代码:
css代码
.parent { height: 100px; border: 1px solid #ccc; /*设置border是为了方便查看效果*/ } .parent img { //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果. line-height: 100px; }
(3) 未知高度的块级元素垂直居中
html代码:
sddvsds dfvsdvds