div居于页面正中间的实现方法

2019-08-14 09:38:31来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

如何让div居于页面中间?这个问题应该困扰了很多人,div居于页面中间并不是简单的top:50%,left:50%,而是让一个div水平居中同时垂直居中,下面小编为大家介绍div居于页面正中间的实现方法。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE?html> ??
  2. <html?lang="en"> ??
  3. <head> ??
  4. ????<meta?charset="UTF-8"> ??
  5. ????<title>div居于页面正中间</title> ??
  6. ????<style?type="text/css"> ??
  7. ????????*{ ??
  8. ????????????margin:?0; ??
  9. ????????????padding:?0; ??
  10. ????????????background-color:?#EAEAEA; ??
  11. ????????} ??
  12. ????????div{ ??
  13. ????????????width:?200px; ??
  14. ????????????height:?200px; ??
  15. ????????????background-color:?#1E90FF; ??
  16. ????????} ??
  17. ????????.center-in-center{ ??
  18. ????????????position:?absolute; ??
  19. ????????????top:?50%; ??
  20. ????????????left:?50%; ??
  21. ????????} ??
  22. ????</style> ??
  23. </head> ??
  24. <body> ??
  25. ????<div?class="center-in-center"></div> ??
  26. </body> ??
  27. </html>??

从我的截图可以看出,div的左顶点刚好在页面的中心点处。现在的思路是,如何移动div然后让div的中心和页面中心重合,即可达到我们一开始想要的结果。在这里我要介绍一种方法,使用css的transform属性。由于这个属性的值很多,我这里就不一一介绍,只是说一下它的translate。我们给刚才的center-in-center类加上translate(0,-50%)

JavaScript Code复制内容到剪贴板
  1. .center-in-center{ ??
  2. ????position:?absolute; ??
  3. ????top:?50%; ??
  4. ????left:?50%; ??
  5. ????transform:?translate(0,?-50%); ??
  6. }??

如果使用过这个属性,应该知道怎么回事了。translate(0, -50%),第一个值是指水平移动量,和tansform的translateX效果一样,第二个值那就是垂直方向偏移量,但为负数时,代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。

附上完整代码与效果:

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE?html> ??
  2. <html?lang="en"> ??
  3. <head> ??
  4. ????<meta?charset="UTF-8"> ??
  5. ????<title>div居于页面正中间</title> ??
  6. ????<style?type="text/css"> ??
  7. ????????*{ ??
  8. ????????????margin:?0; ??
  9. ????????????padding:?0; ??
  10. ????????????background-color:?#EAEAEA; ??
  11. ????????} ??
  12. ????????div{ ??
  13. ????????????width:?200px; ??
  14. ????????????height:?200px; ??
  15. ????????????background-color:?#1E90FF; ??
  16. ????????} ??
  17. ????????.center-in-center{ ??
  18. ????????????position:?absolute; ??
  19. ????????????top:?50%; ??
  20. ????????????left:?50%; ??
  21. ????????????-webkit-transform:?translate(-50%,?-50%); ??
  22. ????????????-moz-transform:?translate(-50%,?-50%); ??
  23. ????????????-ms-transform:?translate(-50%,?-50%); ??
  24. ????????????-o-transform:?translate(-50%,?-50%); ??
  25. ????????????transform:?translate(-50%,?-50%); ??
  26. ????????} ??
  27. ????</style> ??
  28. </head> ??
  29. <body> ??
  30. ????<div?class="center-in-center"></div> ??
  31. </body> ??
  32. </html>??

说多两句,这也可以是一道非常不错的面试题,大家可以留意一下。当然还有其他解法,这里就不再班门弄斧了。另外,css3的transform是一个非常强大的属性,可以做很多变换3d之类的炫酷效果,如果有兴趣可以深入研究一下。但前端有一个不得不说的痛,浏览器兼容性问题。。。其他的浏览器还好说,万恶的IE,IE9支持一小部分属性,IE9以下全部不支持。如果还深爱着IE,那只能另辟蹊径,甚至不惜用js去解决咯!又快到周末了,又可以好好睡觉了,真好!

以上div居于页面正中间的实现方法,希望大家喜欢,更多相关内容请继续关注爱站技术频道。


原文链接:https://js.aizhan.com/web_authoring/css/6112.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:带你了解em

下一篇:两列自适应布局的思路