如何将没有 parent 的 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

这个不是很直观，但尝试将边距设置为 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%);
}

如何将没有 parent 的 DIV 居中？

How do I center a DIV with no parent?

html

css

text-align

center