HTML/CSS 设置背景图片一屏幕下水平垂直居中
2019-11-08 本文已影响0人
圆梦人生
1、直接设置最大div高度为100vh，设置背景图水平垂直居中
2、使用绝对定位 + translate 位移
案例：
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.divInfo {
min-height: 100vh;
background: url('111111.png') center no-repeat;
}
.centerbg {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="centerbg">
方式2
</div>
<!-- 方式1 -->
<div class="divInfo">
</div>
</body>
</html>
效果
image.png
