How to center HTML input text field placeholder with CSS?

Sometimes, we want to center HTML input text field placeholder with CSS.

In this article, we’ll look at how to center HTML input text field placeholder with CSS.

How to center HTML input text field placeholder with CSS?

To center HTML input text field placeholder with CSS, we set the text-align property.

For instance, we write

:placeholder {
  text-align: center;
}

::-webkit-input-placeholder {
  text-align: center;
}

:-moz-placeholder {
  text-align: center;
}

::-moz-placeholder {
  text-align: center;
}

:-ms-input-placeholder {
  text-align: center;
}

to select the placeholders with the :placeholder selector.

And then we center the placeholder text with text-align: center;.

Conclusion

To center HTML input text field placeholder with CSS, we set the text-align property.