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

Question

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

#control {
    text-align: center;
}

我要居中的元素是

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

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

Answer 1

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

#control {
    margin: 0 auto;
}

Answer 2

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

#control {
        margin: 0 auto;
}

Answer 3

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

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