To achieve this layout in CSS, you can utilize the properties "display: flex", "justify-content: center", and "align-items: center". Here is a demo on JSFiddle with some example code:
body{
font-family: 'Roboto Mono', monospace;
background-image: url("assets/handheld_bg_white.png");
background-size: cover;
background-repeat: no-repeat;
}
.background {
display: flex;
justify-content: center;
align-items: center;
height: 50vw;
width: 80vw;
padding: 20px;
margin: 20px;
background-color: blue;
position:relative;
z-index: 100;
}
.overlay-box {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
height: 25vw;
width: 25vw;
background-color: white;
position:relative;
z-index: 1000;
position:relative;
}
<div class = "background">
<div class = "overlay-box">
</div>
</div>
You can apply these properties to the parent div (in this case "background") to center its content - the child div ("overlay-box"). You may also include the "flex" and "center" attributes in the child for additional centering, but they are optional.
If you have a background image, you can insert it inside the parent div like so:
<div class = "background">
<img src="/image.png" class="responsive">
<div class = "overlay-box">
</div>
</div>
Simply add a responsive class in your CSS to make the image adapt to the size of the parent container:
.responsive {
width: 100%;
height: auto;
}