我有三个 div,如下所示。我想让内部 div 恰好位于外部 div 的中心。我找到了一些带有位置样式集的解决方案,但它给我元素中的其他元素带来了问题,所以我不想在样式中使用位置。我想在不使用位置样式的情况下将内部 div 居中。
<div id="container">
<div id="outer">
<div id="inner"></div>
</div>
</div>
最佳答案
您可以使用 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 .
关于html - 如何在不使用定位属性的情况下保持子元素垂直和水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33908751/