Can I create Background and foreground using Flexbox? - html

Question

I want to position one div in the background and the other div in the foreground. The foground div should be centered automatically vertically and horizontally according to the size of the div in the background, or the size of the container div.
I wonder if there is an elegant way to do it using Flexbox. Sometimes, before I start arranging the flexbox elements I see the different children overlap. So far I have failed to duplicate this. The advantage is that if we can get the elements to overlap using flexbox, we can center the foreground both vertically and horizontally easily using the margin:auto;.
A different way to do this is to use position relative and absolute. For example:
<div class="container" style="position:relative; height:400px; width:100%;">
<div class="backgorund" style="height:100%; width:100%; background-color:green;">
<div class ="child" style="position:absolute; left:50%;">
<div class="foreground" style="position:relative; right:50%">
<p>I'm centered horizontally, but not vertically</p>
</div>
</div>
</div>
but then I'll have to add flexbox inside the foreground div to center the foreground vertically.

Answer 1

I’m not sure if I got you right. But you would just need display: flex; for releasing the magic, align-items: center; for horizontal, and justify-content: center; for vertical aligning nested element(s).
html, body {
height: 100%;
}
.container {
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}
.item {
padding: 2em;
color: white;
background-color: hotpink;
}
<div class="container">
<div class="item">
<p>Lorem ipsum dolor sit amet</p>
<p>Consectetur adipisci velit</p>
</div>
</div>

Answer 2

The answer would be no. You can use flexbox and you can center things - and you can stack those things on top of each other, but there isn't currently a special flexbox way of doing that. You'll have to use another positioning.
I use this technique often. Note that you'll need a relatively positioned parent
#mixin absolute-translate-center() {
float: none; /* just in case */
position: absolute;
margin-left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
}
.thing {
#include absolute-translate-center();
}
or
absolute-translate-center()
float: none
position: absolute;
margin-left: 50%
margin-right: 50%
transform: translate(-50%, -50%)
.thing
absolute-translate-center()