当前位置:Gxlcms > css > css宽高自适应的div元素以及如何垂直居中

css宽高自适应的div元素以及如何垂直居中

时间:2021-07-01 10:21:17 帮助过:19人阅读

在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法

上代码

  下面的是 结构代码

  1. <div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中
  2.   <div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开
  3.   <img width="100px" src="img/logo.a68568a.png"/>
  4.   </div>
  5.   </div>

  下面是样式代码

  1. .wrap{设置一个居中的外框
  2.         width: 500px;
  3. height: 400px;
  4. border: 1px solid black;
  5. margin: 0 auto;
  6. text-align: center;//水平居中
  7. }
  8. .wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用
  9. display: inline-block;
  10. content: '';
  11. height: 100%;
  12. width: 0;
  13. vertical-align: middle;//垂直居中
  14. }
  15. .center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了
  16. vertical-align: middle;
  17. display: inline-block;
  18. }
  19. img{
  20. vertical-align: top;
  21. }

  二 css3 transform解决

  1. .wrap{//一个固定宽高 居中的外框
  2. width: 500px;
  3. height: 400px;
  4. border: 1px solid black;
  5. margin: 0 auto;
  6. }
  7.     .center{//我们的center div 还是写成inline-block 的样式
  8.          position: relative;
  9.           //相对定位 通过相对定位left top 值的设置来让center div 的左上角的位置 为wrap 的中心
  10.           //但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了
  11.           //通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中(轴心点默认在左上角)
  12.           //注意transform各个浏览器有不同的前缀并且不兼容ie8 以下
  13. top: 50%;
  14. left: 50%;
  15. display: inline-block;
  16. -webkit-transform: translateX(-50%) translateY(-50%);
  17. }
  18. img{
  19. vertical-align: top;
  20. }
  1. <!DOCTYPE html><html><head><meta charset="utf-8" />
  2. <title>
  3. </title>
  4. <style type="text/css">
  5. document{height: 100%;}
  6. html{height: 100%;}
  7. body{height: 100%;
  8. overflow: hidden;margin: 0;}
  9. #bigwrap{width: 100%;height: 100%;text-align: center;}
  10. #bigwrap:before{height: 100%;width: 0;
  11. vertical-align: middle;content: '';
  12. display: inline-block;}
  13. .wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}
  14. .wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}
  15. .center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}
  16. /*
  17. .center {
  18. position: fixed;
  19. top: 50%;
  20. left: 50%;
  21. background-color: #000;
  22. width:50%;
  23. height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}
  24. */
  25. </style>
  26. </head>
  27. <body>
  28. <!--<div id="bigwrap">--><div class="wrap">
  29. <div class="center">
  30. <img width="100px" src="img/logo.a68568a.png"/>
  31. </div>
  32. </div>
  33. </div>
  34. </body>
  35. </html>

以上就是css 宽高自适应的div元素以及如何垂直居中的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行