×

关于网页中"垂直居中"的那些事儿

作者:Terry2014.06.24来源:Web前端之家浏览:12051评论:0
关键词:垂直居中

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

方法一:

我们设置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}

总结:

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/chuiz-middle.html

网友评论文明上网理性发言已有0人参与

发表评论: