将div水平居中对齐的Bug

Question

将div水平居中对齐的Bug

htmlcssalignmentheight

3

我试图通过以下方式使div居中： div的高度为：35.3em margin-top: calc（50％ -（35.3em / 2））

当我调整浏览器宽度时，bug出现了，该div会在水平方向上发生位置变化。

我的网站URL：http://cherry-rocks.herokuapp.com

- R.Bar

1

如果您愿意使用flexbox，您可以将父级div设置为"display：flex"，并将子元素设置为"margin：auto"，以实现始终完美居中。 - tedcurrent

谢谢！对我有用。 - R.Bar

太棒了！ :) 我也将其发布为真正的答案，这样您就可以标记它。 - tedcurrent

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tedcurrent · Accepted Answer

既然你使用的是相对定位，你也可以使用 top 而不是 margin-top 来明确将元素定位到中心位置。如果你愿意使用 flexbox，可以在父元素上使用 display: flex，在子元素上使用 margin: auto 或者使用 top: calc(50% - (35.3em / 2))。