How to center non-fixed child inside fixed parent

Question

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!

ATP · Accepted Answer · 2021-02-21T19:18:08.103

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>

It works! Btw to center both I can just use align-items along with justify-content. Thanks. — Sun R, Feb 21 '21 at 18:31

How to center non-fixed child inside fixed parent

1 Answers1