Guide on aligning a non-fixed child within a fixed parent container

Question

Guide on aligning a non-fixed child within a fixed parent container

I am working on a project with a fixed container (div#popup) that has some CSS styling. The container is set to position:fixed, with specific dimensions, border radius, and background color.

Within this fixed container, there is a form element that I am having trouble centering. Despite trying to use margin: auto in the CSS, the form still sticks to the top of the container rather than being centered.

I'm sure there is a straightforward solution to this issue, but I can't seem to figure it out. Any advice or suggestions would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

To center the content vertically in a container, you can set the container to have display: flex, flex-direction: column, and use justify-content: center;

#popup {
        height: 60vh;
        width: 60vw;

        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 also want to horizontally center the form within the container, you can set the container's direction to row:

#popup {
        height: 60vh;
        width: 60vw;

        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>

Answer 2

To center the content vertically in a container, you can set the container to have display: flex, flex-direction: column, and use justify-content: center;

#popup {
        height: 60vh;
        width: 60vw;

        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 also want to horizontally center the form within the container, you can set the container's direction to row:

#popup {
        height: 60vh;
        width: 60vw;

        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>

Guide on aligning a non-fixed child within a fixed parent container

Answer №1

Similar questions

The HTML input element does not comply with the specified pattern

React Image Slider not loading pictures

HTML border width is set to 100%, but there seems to be an issue with the responsive menu border and icon display

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

Juggling PHP scripts within javascript

Stylish Material Design Icons

Responsive Video Embed Using Bootstrap-5

Having trouble displaying API JSON data in a Vue.js table component

What is the technique for creating a repeating image rather than stretching it?

Tips for displaying just the image name without the entire image file path

Superceding Meta Character Encoding Statements

Is it possible to incorporate Excel files into a web-based system that only supports HTML?

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

What is the method to obtain the coordinates based on a city name, and subsequently store those coordinates in a variable?

New and improved Bootstrap 5 menu bar

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

Creating and deleting HTML elements in a dynamic array format

Moving Angularjs table rows to another tableMoving table row from one Angular

Unlock the power of nested dynamic content creation with JavaScript

How come I can't see this on my display?