How to Vertically Center Textarea Placeholder

Just use the line-height property width value equal or a bit smaller than the height value.

For example:

  • height: 50px
  • line-height: 40px

Example:

<textarea style="width: 400px; height: 50px; line-height: 40px;" placeholder="My Placeholder"></textarea>

Output:

To make it centered vertically and horizontally, add the text-align: center.

Example:

<textarea style="width: 400px; height: 50px; line-height: 40px; text-align: center;" placeholder="My Placeholder"></textarea>

Output: