title: Vertically align an input placeholder with CSS (or set line-height)
body: <p>Is it possible to vertically align a placeholder independently of the parent input? There seems to be no way to have the placeholder in the code below appear in the vertical center of the input field. I've tried all css properties and workarounds I can think of or find online but the different font sizes on the input and the placeholder seem to make it impossible in webkit browsers at least.</p>
  
  <p><strong>Edit:</strong> Left is the issue, right is the desired look:
  <a href="https://i.stack.imgur.com/zZ8au.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZ8au.png" alt="enter image description here"></a></p>
  
  <p><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>input {
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    line-height: 44px;
  }
  
  input::-webkit-input-placeholder {
    font-size: 9px;
    text-transform: uppercase;
    color: #AAA;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='text' placeholder='enter some text' /&gt;</code></pre>
  </div>
  </div>
  </p>