Vertically center input placeholder in Chrome-CodePudding

Any idea how to vertically center an input field placeholder on Chrome? The input placeholder in Firefox and Safari appear vertically centered, but appears lower Chrome.

I tried answers from other posts, like transforms on the placeholder, but didn't seem to work.

&::placeholder {
    margin: 0 0 0 0;
    font-size: 11px;
    text-align: left;
    color: green;

    // transform-origin: 0% 50%;

    // transform: translate3d(0, -2px, 0);
}

Here is a full example:
https://codepen.io/illusionfactory/pen/xxJZrYp?editors=1111

The translate moves it but then the alignment is not good across all browsers. Any help is appreciated!

CodePudding user response：

you can try with css flexbox.

    &::placeholder {
margin: 0;
font-size: 11px;
display:flex;
align-items:center;
justify-content:center; 
color: green;

}

if u want to know about css flex box please refer this it may help u.

CodePudding user response：

input {
  padding: 12px 2px;
}
input::placeholder {
  color:green;
}

<input placeholder="Vertical Center"/>