CSS将div与动态内容垂直对齐

Question

I have the following markup:

<div class="content-one yellow" style="min-height: 365px;">
    <div class="content-one-inner">
        <div class="left">
            <div class="img-wrapper">
                <img src="" alt="Accenture tshirt">
            </div>  
        </div>
        <div class="right">
            <h1 class="desktop">
                <span class="lev-1">
                    <span>CREATE</span> 
                    <span>YOUR</span>
                </span>
                <span class="lev-2">
                    <span>UNIQUE</span> 
                    <span>TEE</span>
                </span>
            </h1>
            <div class="text-wrapper">
                <p> </p>
                <p></p>
                <p></p>
            </div>
            <a class="next" href=""><span>Build your design</span></a>
        </div>
    </div>
</div>

content-one has a min-height calculated by JS which gets the height of the screen like so:

$(document).ready(function(){
    function updateWindowHeight () {
        var currentHeight = $(window).height();
        $('.content-one').css('min-height', currentHeight - 132);
    }

    updateWindowHeight();

    $(window).on('resize', function(){
        updateWindowHeight();
    });
});

I then have a CSS rule like so:

.content-one .content-one-inner {
    margin: 0 0 0 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
}

This centers the div correctly however if the content of it increases or the screen is smaller in height then the .content-one-inner gets hidden under the header rand footer.

How can I write my css that if the screen is smaller or the content increases the div (content-one) is still centered but hidden under header and footer?

Answer 1

As flexbox evangelist I would suggest flexbox :)

Then we will need to add code directly to the parent so div.content-one , which would look like this

.content-one {
 display: flex;
 justify-content: center;
 align-items: center;
}

Here comes codePen with solution