html - 如何在不使用定位属性的情况下保持子元素垂直和水平居中

Question

我有三个 div，如下所示。我想让内部 div 恰好位于外部 div 的中心。我找到了一些带有位置样式集的解决方案，但它给我元素中的其他元素带来了问题，所以我不想在样式中使用位置。我想在不使用位置样式的情况下将内部 div 居中。

<div id="container">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>

Answer 1

您可以使用 CSS flexbox .

#outer {
    display: flex; /* establish flex container */
    justify-content: center; /* center #inner horizontally */
    align-items: center; /* center #inner vertically */
}

注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .

DEMO