关于网页中"垂直居中"的那些事儿 - Web前端

关于网页中"垂直居中"的那些事儿，先前也讨论过，在网上也搜索了一些文章，有很多种方法，但是兼容所有浏览器的也只有三种，分享给大家：

方法一：

我们设置div为绝对定位【position:absolute】，top设置为50%，然后定义高度height，取margin-top值为高度一半且为负【margin-top:-height/2】,实例如下：

html：

1. <div id="box">Web前端之家www.jiangweishan.com</div>

CSS：

1. #box{position:absolute;height:200px;top:50%;margin-top:-100px}

说明：兼容所有浏览器，但是当用户缩小浏览器窗口，内容不见了且滚动条不出现的情况。

方法二：

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight；content 清除浮动，并显示在中间。实例如下：

HTML：

1. <div id="blank"></div>

2. <div id="box">WEB前端之家www.jiangweishan.com</div>

css：

1. #blank{float:left;height:50%;margin-bottom:-100px}

2. #box{position:relative;height:200px;clear:both}

说明：兼容所有浏览器，只是多了个空标签。

方法三：

这个方法比较简单，设置行高即可，只适用于单行文本垂直居中。实例如下：

Html：

1. <div id="box">web前端之家www.jiangweishan.com</div>

css：

1. #box{height:100px;line-height:100px}

总结：

实现垂直居中方法比较多，目前我只知道三种支持所有浏览器的，如果大侠们有其他的方法，欢迎留言指点。