title: Center material design text field
body: <p>I have the following html code:   </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="mdc-text-field steps_div" id="textfeild"&gt;       
    &lt;input type="number" class="mdc-text-field__input" id="steps" name="name"&gt;
    &lt;label class="mdc-floating-label" for="steps"&gt;Steps&lt;/label&gt;
    &lt;div class="mdc-line-ripple"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This CSS centers the text box:</p>
  
  <pre class="lang-css prettyprint-override"><code>div#textfeild {
    display: block;
    margin: 0 auto;
    width: 250px;
  }
  </code></pre>
  
  <p>But this doesn't:</p>
  
  <pre class="lang-css prettyprint-override"><code>.steps_div {
    display: block;
    width: 250px;
    margin: 0 auto;
  }
  </code></pre>
  
  <p>Why does the first works and the second doesn't?</p>