时间:2021-07-01 10:21:17 帮助过:19人阅读
上代码
下面的是 结构代码
- <div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中
- <div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开
- <img width="100px" src="img/logo.a68568a.png"/>
- </div>
- </div>
下面是样式代码
- .wrap{设置一个居中的外框
- width: 500px;
- height: 400px;
- border: 1px solid black;
- margin: 0 auto;
- text-align: center;//水平居中
- }
- .wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用
- display: inline-block;
- content: '';
- height: 100%;
- width: 0;
- vertical-align: middle;//垂直居中
- }
- .center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了
- vertical-align: middle;
- display: inline-block;
- }
- img{
- vertical-align: top;
- }
二 css3 transform解决
- .wrap{//一个固定宽高 居中的外框
- width: 500px;
- height: 400px;
- border: 1px solid black;
- margin: 0 auto;
- }
- .center{//我们的center div 还是写成inline-block 的样式
- position: relative;
- //相对定位 通过相对定位left top 值的设置来让center div 的左上角的位置 为wrap 的中心
- //但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了
- //通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中(轴心点默认在左上角)
- //注意transform各个浏览器有不同的前缀并且不兼容ie8 以下
- top: 50%;
- left: 50%;
- display: inline-block;
- -webkit-transform: translateX(-50%) translateY(-50%);
- }
- img{
- vertical-align: top;
- }
- <!DOCTYPE html><html><head><meta charset="utf-8" />
- <title>
- </title>
- <style type="text/css">
- document{height: 100%;}
- html{height: 100%;}
- body{height: 100%;
- overflow: hidden;margin: 0;}
- #bigwrap{width: 100%;height: 100%;text-align: center;}
- #bigwrap:before{height: 100%;width: 0;
- vertical-align: middle;content: '';
- display: inline-block;}
- .wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}
- .wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}
- .center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}
- /*
- .center {
- position: fixed;
- top: 50%;
- left: 50%;
- background-color: #000;
- width:50%;
- height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}
- */
- </style>
- </head>
- <body>
- <!--<div id="bigwrap">--><div class="wrap">
- <div class="center">
- <img width="100px" src="img/logo.a68568a.png"/>
- </div>
- </div>
- </div>
- </body>
- </html>
以上就是css 宽高自适应的div元素以及如何垂直居中的详细内容,更多请关注Gxl网其它相关文章!