我有一个非常非常简单的标记和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™</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
?
答案 0 :(得分:3)
罪魁祸首是你的弹性容器中没有额外的高度。
因为框的高度是内容的高度(默认为height: auto
),所以没有剩余空间用于垂直居中。
将此添加到您的代码中:
#content { height: 100vh }