我无法让 div 水平居中 [重复]

Posted 2023-03-05

【中文标题】我无法让 div 水平居中 [重复]

【英文标题】：I can't get a div to center horizontally [duplicate]

【发布时间】：2019-06-12 20:47:26

【问题描述】：

我无法让 div #buttonwrap 在我的网站上居中。我已经尝试了this similar post 中建议的所有选项。但它仍然不起作用。奇怪的是#backgroundwrap 可以在相同的代码中正常工作。我已经检查了我的 CSS 和 html 标记，但没有帮助。

希望有人能帮我解决这个问题，这让我发疯了，几乎删除了我所有的代码！完整代码在线：http://setup.industries/projects/masqueradeclassix/

.buttonwrap 
    margin: 0 auto;
    position: relative;
    width: 100%;
    display: block;
    float: none;


/* parent */

#container 
    width: 100%;
    height: 100%;
 

【问题讨论】：

@praveen 这不是帖子中提到的重复

好的，我去看看。

【参考方案1】：

width: 100%;
margin: 0 auto;

它是 100% 宽的，带有自动边距。

因此计算边距以将其放在中心。

即左边0，右边0。

它居中。

【讨论】：

谢谢！有没有办法让 div 只有它包含的 ul > li 的宽度？你会怎么做？

【参考方案2】：

如果 width 是 100%，则使用 margin: 0 auto; 将元素居中是没有意义的 - 它已经填满了容器的宽度。将width 设为小于 100% 的值，或固定像素值。

【讨论】：

我犯了一个非常愚蠢的错误，将子 div 也设为 100%。现在感觉很愚蠢:) 谢谢@Johannes

【参考方案3】：

好的，这就是你需要的。我真的希望你从那里找到解决方案，但是你去吧：

.buttonwrap 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

预览

【讨论】：

我犯了一个非常愚蠢的错误，将子 div 也设为 100%。现在觉得自己很蠢 :) 无论如何谢谢你，Praveen。