如何在没有父级的情况下居中 DIV？ [复制]

Posted 2023-03-05

【中文标题】如何在没有父级的情况下居中 DIV？ [复制]

【英文标题】：How do I center a DIV with no parent? [duplicate]

【发布时间】：2018-09-20 12:10:11

【问题描述】：

我想将我的表单放在它所在的水平行的中心。我认为这很简单

#control 
    text-align: center;

我要居中的元素是

<div id="control" class="btn">
    <div id="btn_container"><img   src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png"  /></div>
    <span>Start</span> 
</div>

但是，该元素仍未居中 -- https://jsfiddle.net/xwdnvcy5/58/ 。我没有得到非常明显的东西，但我不知道它是什么。

【问题讨论】：

您的小提琴与您的问题代码完全不匹配。约皮夫

【参考方案1】：

这个不是很直观，但是试试把margin设置为0 auto。

#control 
    margin: 0 auto;

【讨论】：

不知道为什么我会投票，请在上面的 jsfiddle 中检查并猜猜是什么。它有效。

如果我不得不猜测我认为您因未正确格式化问题而被否决？不过我给了你一个赞成票，因为答案在技术上是正确的，只是一点点努力。

【参考方案2】：

答案其实很简单。您需要将 margin-left/right 设置为 auto.. 像这样：

#control 
        margin: 0 auto;

【参考方案3】：

您是否尝试使#control div 居中？ 试试这个

#control 
  position:relative;
  left: 50%;
  transform: translateX(-50%);

【讨论】：

这行得通，但我认为它过于复杂，一个简单的margin: 0 auto 可以很好地处理这种事情。

我想在他的情况下它可以工作，因为他有另一个 .btn 类并且它有 display: table;也不知道为什么 .btn 有 text-align: left，然后 #control 有 text-algin:center