css 宽高自适应的div元素以及如何垂直居中
程序员文章站
2022-04-11 19:34:26
...
在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法
上代码
下面的是 结构代码
<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元素以及如何垂直居中的详细内容,更多请关注其它相关文章!
推荐阅读
-
div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose
-
div+css实现未知宽高元素垂直水平居中_html/css_WEB-ITnose
-
div内部未知宽高的元素的垂直居中
-
详解CSS在固定宽高的div内实现垂直居中的实例分享
-
不定宽高div内图片垂直居中的css样式
-
css 宽高自适应的div元素以及如何垂直居中
-
css3中关于transform属性实现div不定宽高垂直水平居中的详细介绍
-
详解CSS在固定宽高的div内实现垂直居中的实例分享
-
不定宽高div内图片垂直居中的css样式
-
css如何实现未知宽高div中图片垂直水平居中效果_html/css_WEB-ITnose