html - 在网站上对齐元素时遇到问题，div 卡在左上角，按钮未对齐

Question

我研究了如何在页面中心正确排列元素并得到了各种各样的答案，从做

div {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 }

或

div {
 position: absolute;
 top: 50%;
 left: 50%;
 }

但这些都不能始终如一地工作，或者如果他们这样做，他们有时会将其他 div(position:absolute;)推到其他地方，或者在其他浏览器上不起作用。我一直在想，如何让我的代码将 div 放在我想要的位置？

举个实际的例子，我的网站在 dannyliang.com，尽管有“margin-left: auto; margin-right: auto;”，但我的“更多选项”按钮卡在左上角。

谢谢!

Answer 1

要使页面上的元素水平居中，无需使用 position: absolute;。只要确保它们是 block 元素即可。默认情况下，div 已经是 block 元素，因此您可以这样做:

div {
    margin: 0 auto;
}