Question

我有以下标记：

<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有一个由JS计算的min-height，它可以获得屏幕的高度：

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

    updateWindowHeight();

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

然后我有一个像这样的CSS规则：

.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%;
}

这使div正确居中，但如果它的内容增加或屏幕高度较小，则.content-one-inner会隐藏在标题rand页脚下。

如何编写我的CSS，如果屏幕较小或内容增加，div（内容一）仍然居中但隐藏在页眉和页脚下？

Answer 1

作为flexbox传道者，我建议flexbox：）

然后我们需要将代码直接添加到parent所以div.content-one，这看起来像这样

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

来了codePen 用解决方案

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

1 个答案: