如何使用CSS <div>在另一个内部水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我昨天成了学校里使用css3 flexbox语句的网站.我之前从未使用过它.所以我稍微谷歌了.并发现了很多不同风格的flexbox语句.
有些人写display: box;,有些使用display: flexbox;和其他display: flex;.
那么有什么不同？我该用哪个？
我一直在使用下面提到的代码,它适用于我的Chrome,但不适用于我的IE9和Safari.
我搜索了解决方案,尽管我有各种供应商前缀,但这些结果令我感到困惑.
<div style="display: flex; flex-direction: row;">
<div></div>
<div></div>
</div>
我最近已经学到了很多关于flexbox的知识，但是我仍然不清楚一件事。我应该始终将/ 设置display为flex/ inline-flex还是使用block/ 总是有利的inline-block？
我发现了几篇有用的文章，但是没有一篇文章回答这个特定的问题。本文介绍了display使用flexbox而不是将它们与比较时不同值之间的区别display: block。问题确实表明使用block/ inline-block已过时，但我还没有看到任何其他来源证实这一点。如果display: block现在已经过时了，我会以为W3学校会这样说（并不是说它们总是正确的，但它们似乎是一个很好的来源）。
这篇文章提到了几个答案，但是同样，它也没有解释何时display: block应使用（而不是display: flex）。
回答的其他文章类似的问题是这一个和这一个。虽然两者都是很棒的文章。第一个给了两者优点和缺点，但是flexbox的唯一显着缺点是浏览器兼容性，这与该项目无关。后一篇文章给出了我所看到的最好的答案，即使用display: flex允许元素保留flexbox属性。这是否意味着如果不需要flexbox属性，我应该使用它display: block？会对性能产生影响，还是应该始终使用display: flex？