前端

CSS – Put a div in the middle of another div

云博小周宇1 Min Read

Horizontally center:

.div_out {
  width: 100vw;
  height: 100vh;
 display: flex;
 justify-content: center;
}

.div_in {
 width: 80%;
 height: 80%;
 background-image: url(../images/bg.jpg);
 background-size: 100% 100%;
}

Both horizontally and vertically center:

.div_out {
  width: 100vw;
  height: 100vh;
}

.div_in {
 width: 80%;
 height: 80%;
 background-image: url(../images/bg.jpg);
 background-size: 100% 100%;
 position: relative;
 left: 10%;
 top: 10%;
}