flex实现水平垂直居中效果及其它方式

这里实现一个带有遮罩层,垂直水平居中图片的效果,无论浏览器窗口如何调节都能居中显示。应用CSS3的flex属性版本如下:

<body>
 <div>Hello</div>
 <div class="wrap">
 <div class="div1"><img src="img/1.jpg" alt=""></div>
 </div>
</body>

css:主要是父级的display:flex,align-items:center,子元素的margin:auto;

.wrap {
 display: flex;
 background-color: #000;
 opacity: 0.8;
 height: 100%;
 width: 100%;
 align-items: center;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 }
 
 .div1 {
 max-width: 640px;
 min-width: 320px;
 margin: auto;
 }
 
 .div1>img {
 width: 100%;
 display: block;
 }

其它几种方式:

.wrap { 
 background-color: #000;
 opacity: 0.8;
 height: 100%;
 width: 100%; 
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

 text-align: center;
 }
 
 .div1 {
 max-width: 640px;
 min-width: 320px;
 
 display: inline-block;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 }
css3
作者:张雪飞
出处:https://zhangxuefei.site/p/1772
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注