Question

我有一个非常非常简单的标记和CSS，但由于某种原因，我似乎无法使用flexbox将div放在中心位置。（水平和垂直）

我经历了很多问题/答案 - 但我找不到罪魁祸首......

一切都非常简单，容器，两个div：

<div id="content">
        <div class="logo-box box">
            <img alt="logo" src="http://placehold.it/222x320?text=logo">
        </div>
        <div class="main-box box">
            <h2>loremIpsum</h2>
            <span>Powerful Slogan&trade;</span>
            <ul class="info">
                <li>
                    <h3>Add. 地址</h3>
                    <p>(HK) Street, level, , Bulding ,room, etc ..</p>
                    <p>(CN) 中国广东.. yep, in chinese ..106</p>
                </li>
                <li>
                    <h3>Tel . 电话</h3>
                    <p>HK (+852) 970-0000 </p>
                    <p> CN (+86) 0757-000000 </p>
                </li>
                <li>
                    <h3>Mail. 邮件</h3>
                    <p>info@domain.com </p>
                    <p> admin@domain.com</p>
                </li>
            </ul>
        </div>
    </div>

和容器的flex css：

#content { 
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center; /*should not matter - only one row*/
    align-items: center;
}

添加重置时，更奇怪。（为什么??）

这是一个js bin： https://jsbin.com/jihaji/edit?html,css,output

我看不到我的标记有什么问题吗？用css？或者完全了解flexbox？

Answer 1

罪魁祸首是你的弹性容器中没有额外的高度。

因为框的高度是内容的高度（默认为height: auto），所以没有剩余空间用于垂直居中。

将此添加到您的代码中：

#content { height: 100vh }

Flexbox垂直和水平中心

1 个答案: