关于网页中"垂直居中"的那些事儿,先前也讨论过,在网上也搜索了一些文章,有很多种方法,但是兼容所有浏览器的也只有三种,分享给大家:
方法一:
我们设置div为绝对定位【position:absolute】,top设置为50%,然后定义高度height,取margin-top值为高度一半且为负【margin-top:-height/2】,实例如下:
Html:
<div id="box">WEB前端之家www.jiangweishan.com</div>
css:
#box{position:absolute;height:200px;top:50%;margin-top:-100px}
说明:兼容所有浏览器,但是当用户缩小浏览器窗口,内容不见了且滚动条不出现的情况。
方法二:
这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动,并显示在中间。实例如下:
Html:
<div id="blank"></div>
<div id="box">WEB前端之家www.jiangweishan.com</div>
css:
#blank{float:left;height:50%;margin-bottom:-100px}
#box{position:relative;height:200px;clear:both}
说明:兼容所有浏览器,只是多了个空标签。
方法三:
这个方法比较简单,设置行高即可,只适用于单行文本垂直居中。实例如下:
Html:
<div id="box">WEB前端之家www.jiangweishan.com</div>
css:
#box{height:100px;line-height:100px}
总结:
实现垂直居中方法比较多,目前我只知道三种支持所有浏览器的,如果大侠们有其他的方法,欢迎留言指点。
网友评论文明上网理性发言已有0人参与
发表评论: