垂直居中

方法一

这个方法把一些 div的显示方式设置为表格table-cell,因此我们可以使用表格的 vertical-align:middle 属性。

缺点:在IE中不支持,vertical-align只支持行内元素(有时候行内元素都失效。。。)

方法二

当内容是单行,并且高度固定,将line-heightheight设置相等,可以实现垂直居中。

优点:使用于所有的浏览器,运用在小元素上是非常有用的,比如说让一个button、图片或者单行文本字段。

方法三

使用绝对定位的div,将其top设置为50%。

#content { 
position: absolute; 
top: 50%; 
height: 240px; 
margin-top: -120px; /* negative half of the height */
}

优点:适应所有浏览器。
缺点:由于高度固定,没有足够的空间,当内容超过容器的大小时,内容要么会消失,要么会出现滚动条。

你可能感兴趣的:(垂直居中)