How to Vertically Position DIV Elements in CSS

Question

I am having problems positioning my content in CSS. I want to take my content and vertically position it. I have tried using flexbox but it didn't work. I know what flexbox is and it's properties but it didn't work for me. Here's the CSS and HTML Code.

HTML:

<div class="main-div">
    <div class="container-1">
    
        <h2>What is Your Age In Days?</h2>
        <div class="flex-box-container-1">
            <div>
                <button class="btn btn-primary" onclick="ageInDays()">Click Me!</button>
            </div>
            <div>
                <button class="btn btn-danger" onclick="reset()">Try Again</button> 
            </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result"></div>
        </div>

    </div>


    <div class="container-2">
        <h2>Generator</h2>
        <button class="btn btn-success" id="picture-generator" onclick=pictureGenerator()>GENERATE</button>

        <div class="flex-box-container-2" id="picture-gen">
        </div>

    </div>
</div>

CSS:

body {
    background-image: url(Background.jpeg)
}


.container-1, .container-2 {
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    width: 75%;
}

.flex-box-container-1, .flex-box-container-2 {
    display: flex;
    padding: 10px;
    border: 1px solid black;    
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.flex-box-container-1 div {
    padding: 10px;
    align-items: center;
    display: flex;
}

#flex-box-result {
    font-size: 32px;
    font-weight: bold;
}


#yikes {
    font-size: 32px;
    font-weight: bold;
    Animation-name: example;
    Animation-duration: 0.5s;
    animation-iteration-count: infinite;;
}

@keyframes example {
    10% {color: red;}
    15% {color: yellow;}
    20% {color: blue;}
    30% {color: green;}
    40% {color: lightsalmon;}
    50% {color: lightsteelblue}
    60% {color: steelblue}
    70% {color: ivory}
    80% {color: purple}
    90% {color: pink}
    100% {color: magenta;}
    }



.flex-box-container-2 img {
    box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
    margin: 10px;
}

So, I have to vertically align container 1 and 2. I tried doing it with Justify Content and Align Items but it didn't work. I appreciate every single bit of help.

Answer 1

You can use the flex-direction: column to vertically position it.

Answer 2

If Flex doesn't work for you, there's two more ways of doing it, as far as I am aware.

The first one is using display: table; width: 100%; display: table; width: 100%; on the parent element, and display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; on the children you want to vertically align.

The second one involves using position: relative on the parent element, and position: absolute; top: 50%; transform: translateY(-50%); position: absolute; top: 50%; transform: translateY(-50%); on the children.

If you want to center both container-1 and container-2 , one on top of the other, you have to create another div which wraps these two. In this case, this would be your child element.

If you want the two containers to be next to each other, use bootstrap's grid system to give them the appropriate col classes, and consider those two as the children.

In both of the above cases, your parent element should be .main-div .