在div中水平居中输入

Question

我知道这个问题已经被回答了100次，但现有的解决方案似乎都不适合我。

我想要在div中水平居中输入字段。为什么水平居中如此痛苦？！？！？父div的大小可能会根据屏幕大小而改变，因此边距百分比不起作用。

HTML

  <div class="select" id="avatar">
    <h4>Please enter your name.</h4>
    <!-- Object i want to center-->
    <div class="input-group">
      <input type="text" class="form-control text-center" id="playerName">
    </div>

    <h4>And Select Your Ship</h4>
    <img class="avatars" id="ship1" src="images/spaceship1.png">
    <img class="avatars" id="ship2" src="images/spaceship2.png">
    <img class="avatars" id="ship3" src="images/spaceship3.png">
    <img class="avatars" id="ship4" src="images/spaceship4.png">
    <button class="btn" id="submitPlayer">Submit</button>
  </div>

父级CSS

    .select {
        background-color: white;
        z-index: 200;
        padding: 0px 15px 0px 15px;
        text-align: center;
        font-family: 'Krona One', sans-serif;
        border: medium dashed green;
        margin-left: 25%;
        margin-right: 25%;
    }

我也想将这个放在中心，我假设它将是相同的解决方案，但它除了body之外没有父对象。

<div class="input-group">
  <input class="text-center" type="text" id="word">
</div>

Answer 1

为什么不使用Bootstrap的center-block类..

<div class="input-group center-block">
  <input class="center-block" type="text" id="word">
</div>

http://www.bootply.com/sTboTk5CvU

Answer 2

输入和按钮类似于img，您可以将它们显示为块，并使用空白区:auto；因此，它们独立并位于中间，而无需使用100%的宽度/可用空间：

​

.select {
  background-color: white;
  z-index: 200;
  padding: 0px 15px 0px 15px;
  text-align: center;
  font-family: 'Krona One', sans-serif;
  border: medium dashed green;
  margin-left: 25%;
  margin-right: 25%;
}
button.btn#submitPlayer {
  display: block;
  margin: auto;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="select" id="avatar">
  <h4>Please enter your name.</h4>
  <!-- Object i want to center-->
  <div class="input-group">
    <input type="text" class="form-control text-center" id="playerName">
  </div>

  <h4>And Select Your Ship</h4>
  <img class="avatars" id="ship1" src="images/spaceship1.png">
  <img class="avatars" id="ship2" src="images/spaceship2.png">
  <img class="avatars" id="ship3" src="images/spaceship3.png">
  <img class="avatars" id="ship4" src="images/spaceship4.png">
  <button class="btn" id="submitPlayer">Submit</button>
</div>

​

您也可以对input执行相同的操作：

​

.input-group,
input#word.text-center{
  display: block;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <input class="text-center" type="text" id="word">
</div>

​