How to center non-fixed child inside fixed parent [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I have a position:fixed container (div#popup)
#popup {
height: 60vh;
width: 60vw;
/* visibility: hidden; */
position: fixed;
left: 20vw;
top: 20vh;
border-radius: 8%;
background-color: rgb(241, 237, 231);
}
#popup form {
position: static;
margin: auto;
}
<div id='popup'>
<form action='emailform.php' method="POST">
<input type="text" name='name' placeholder="Name: "/>
<input type="text" name='mail' placeholder="Your Email: "/>
<input type="text" name='subject' placeholder="Subject: "/>
<textarea name='message' placeholder="Message: "></textarea>
<button type='submit' name="submit">Submit</button>
</form>
</div>
that contains a form that isnt fixed. Right now the form is just sticking to the top of the container. How do I center it? I've tried margin: auto and it doesn't work.
I'm guessing this should be a simple fix, but can't think of it.
Thanks!

Answer 1

You can make the container display :flex, flex-direction:column and use justify-content: center;
#popup {
height: 60vh;
width: 60vw;
/* visibility: hidden; */
position: fixed;
left: 20vw;
top: 20vh;
border-radius: 8%;
background-color: rgb(241, 237, 231);
display :flex;
flex-direction:column;
justify-content: center;
}
#popup form {
position: static;
margin: auto;
}
<div id='popup'>
<form action='emailform.php' method="POST">
<input type="text" name='name' placeholder="Name: "/>
<input type="text" name='mail' placeholder="Your Email: "/>
<input type="text" name='subject' placeholder="Subject: "/>
<textarea name='message' placeholder="Message: "></textarea>
<button type='submit' name="submit">Submit</button>
</form>
</div>
If you want horizontally center too you can do the same to the form but use row direction on the container:
#popup {
height: 60vh;
width: 60vw;
/* visibility: hidden; */
position: fixed;
left: 20vw;
top: 20vh;
border-radius: 8%;
background-color: rgb(241, 237, 231);
display :flex;
flex-direction:row;
justify-content: center;
}
#popup form {
position: static;
margin: auto;
display :flex;
flex-direction:column;
justify-content: center;
}
<div id='popup'>
<form action='emailform.php' method="POST">
<input type="text" name='name' placeholder="Name: "/>
<input type="text" name='mail' placeholder="Your Email: "/>
<input type="text" name='subject' placeholder="Subject: "/>
<textarea name='message' placeholder="Message: "></textarea>
<button type='submit' name="submit">Submit</button>
</form>
<form action='emailform.php' method="POST">
<input type="text" name='name' placeholder="Name: "/>
<input type="text" name='mail' placeholder="Your Email: "/>
<input type="text" name='subject' placeholder="Subject: "/>
<textarea name='message' placeholder="Message: "></textarea>
<button type='submit' name="submit">Submit</button>
</form>
</div>