title: Center input horizontally in div
body: <p>I know this has been answered 100 times, but none of the existing solutions seem to work for me.</p>
  
  <p>I want to center an input field horizontally in a div. Why is horizontal centering such a pain?!?!? The parent div may change in size based on screen size, so margin percentages don't work.</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="select" id="avatar"&gt;
      &lt;h4&gt;Please enter your name.&lt;/h4&gt;
      &lt;!-- Object i want to center--&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control text-center" id="playerName"&gt;
      &lt;/div&gt;
  
      &lt;h4&gt;And Select Your Ship&lt;/h4&gt;
      &lt;img class="avatars" id="ship1" src="images/spaceship1.png"&gt;
      &lt;img class="avatars" id="ship2" src="images/spaceship2.png"&gt;
      &lt;img class="avatars" id="ship3" src="images/spaceship3.png"&gt;
      &lt;img class="avatars" id="ship4" src="images/spaceship4.png"&gt;
      &lt;button class="btn" id="submitPlayer"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>parents CSS</p>
  
  <pre><code>    .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%;
      }
  </code></pre>
  
  <p>I also want to center this one, and I assume it will be the same solution, but it has no parent, besides body.</p>
  
  <pre><code>&lt;div class="input-group"&gt;
    &lt;input class="text-center" type="text" id="word"&gt;
  &lt;/div&gt;
  </code></pre>