页面元素:
<div class="box">
<div class="box-div"></div>
</div>
CSS样式:
<style type="text/css">
*{margin: 0;padding: 0}
.box{
width: 100%;
height: 100%;
min-height: 700px;
position: relative;
overflow: hidden;
}
//全屏显示
.box-div{
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: blue;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
//居中显示
.box-div{
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
background: blue;
transform: translate(-50%,-25%);
-webkit-transform: translate(-50%, -25%);
-moz-transform: translate(-50%, -25%);
-ms-transform: translate(-50%, -25%);
-o-transform: translate(-50%, -25%);
}
</style>