div居于页面正中间的实现方法
2019-08-14 09:38:31来源:爱站网 阅读 ()
如何让div居于页面中间?这个问题应该困扰了很多人,div居于页面中间并不是简单的top:50%,left:50%,而是让一个div水平居中同时垂直居中,下面小编为大家介绍div居于页面正中间的实现方法。
- <!DOCTYPE?html> ??
- <html?lang="en"> ??
- <head> ??
- ????<meta?charset="UTF-8"> ??
- ????<title>div居于页面正中间</title> ??
- ????<style?type="text/css"> ??
- ????????*{ ??
- ????????????margin:?0; ??
- ????????????padding:?0; ??
- ????????????background-color:?#EAEAEA; ??
- ????????} ??
- ????????div{ ??
- ????????????width:?200px; ??
- ????????????height:?200px; ??
- ????????????background-color:?#1E90FF; ??
- ????????} ??
- ????????.center-in-center{ ??
- ????????????position:?absolute; ??
- ????????????top:?50%; ??
- ????????????left:?50%; ??
- ????????} ??
- ????</style> ??
- </head> ??
- <body> ??
- ????<div?class="center-in-center"></div> ??
- </body> ??
- </html>??
从我的截图可以看出,div的左顶点刚好在页面的中心点处。现在的思路是,如何移动div然后让div的中心和页面中心重合,即可达到我们一开始想要的结果。在这里我要介绍一种方法,使用css的transform属性。由于这个属性的值很多,我这里就不一一介绍,只是说一下它的translate。我们给刚才的center-in-center类加上translate(0,-50%)
- .center-in-center{ ??
- ????position:?absolute; ??
- ????top:?50%; ??
- ????left:?50%; ??
- ????transform:?translate(0,?-50%); ??
- }??
如果使用过这个属性,应该知道怎么回事了。translate(0, -50%),第一个值是指水平移动量,和tansform的translateX效果一样,第二个值那就是垂直方向偏移量,但为负数时,代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。
附上完整代码与效果:
- <!DOCTYPE?html> ??
- <html?lang="en"> ??
- <head> ??
- ????<meta?charset="UTF-8"> ??
- ????<title>div居于页面正中间</title> ??
- ????<style?type="text/css"> ??
- ????????*{ ??
- ????????????margin:?0; ??
- ????????????padding:?0; ??
- ????????????background-color:?#EAEAEA; ??
- ????????} ??
- ????????div{ ??
- ????????????width:?200px; ??
- ????????????height:?200px; ??
- ????????????background-color:?#1E90FF; ??
- ????????} ??
- ????????.center-in-center{ ??
- ????????????position:?absolute; ??
- ????????????top:?50%; ??
- ????????????left:?50%; ??
- ????????????-webkit-transform:?translate(-50%,?-50%); ??
- ????????????-moz-transform:?translate(-50%,?-50%); ??
- ????????????-ms-transform:?translate(-50%,?-50%); ??
- ????????????-o-transform:?translate(-50%,?-50%); ??
- ????????????transform:?translate(-50%,?-50%); ??
- ????????} ??
- ????</style> ??
- </head> ??
- <body> ??
- ????<div?class="center-in-center"></div> ??
- </body> ??
- </html>??
说多两句,这也可以是一道非常不错的面试题,大家可以留意一下。当然还有其他解法,这里就不再班门弄斧了。另外,css3的transform是一个非常强大的属性,可以做很多变换3d之类的炫酷效果,如果有兴趣可以深入研究一下。但前端有一个不得不说的痛,浏览器兼容性问题。。。其他的浏览器还好说,万恶的IE,IE9支持一小部分属性,IE9以下全部不支持。如果还深爱着IE,那只能另辟蹊径,甚至不惜用js去解决咯!又快到周末了,又可以好好睡觉了,真好!
以上div居于页面正中间的实现方法,希望大家喜欢,更多相关内容请继续关注爱站技术频道。
原文链接:https://js.aizhan.com/web_authoring/css/6112.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:带你了解em
下一篇:两列自适应布局的思路
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash