How to Vertically Position DIV Elements in CSS-CodePudding

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 >
    <div >
    
        <h2>What is Your Age In Days?</h2>
        <div >
            <div>
                <button  onclick="ageInDays()">Click Me!</button>
            </div>
            <div>
                <button  onclick="reset()">Try Again</button> 
            </div>
        </div>

        <div >
            <div id="flex-box-result"></div>
        </div>

    </div>


    <div >
        <h2>Generator</h2>
        <button  id="picture-generator" onclick=pictureGenerator()>GENERATE</button>

        <div  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.

CodePudding user response：

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

CodePudding user response：

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%; on the parent element, and 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%); 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.