title: Center date in input field with date type
body: <p>I want to center date in <code>input</code>, not <code>input</code> inside <code>div</code>. If I do centering, it centers date inside of part of <code>input</code> because there is a right-hand side panel for choosing a date based on a calendar, which resizes dependently of input width.</p>
  
  <p><strong>Small code snippet for demonstration:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.center {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div&gt;
        &lt;input type='date' class='center' value='2006-01-01' width='100'&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to force centering with ignoring the right panel. Then the date is not fully visible.</p>
  
  <p>Another approach was to find the size of calendar choice panel, and I did not find any mechanism both on StackOverflow and Internet to calculate the width, plus I did experiments with a ruler to find the proportion, and it also did not work.</p>
  
  <p>The last, I tried searching into StackOverflow and did not find any similar questions.</p>
  
  <p>In my project, I use plain JavaScript, jQuery, HTML, and CSS.</p>