如何在文本区域（textarea）内实现文本居中对齐？

嘿，要搞定textarea里的文本（包括占位符）居中对齐其实挺简单的，咱们结合你的代码示例来一步步拆解：

1. 文本区域（textarea）的文本居中 #

对于用户输入的文本，咱们要兼顾水平居中和垂直居中：

• 水平居中：直接用 text-align: center 就能让输入的文本在水平方向居中显示；
• 垂直居中：如果是固定高度的textarea，你可以通过设置和高度一致的line-height，或者搭配vertical-align: middle+display: inline-block来实现。示例里的.username类就是用了固定高度+内联块级元素的方式，让垂直对齐生效。

整理后的CSS代码：

.username {
  resize: none; /* 禁止用户调整textarea大小 */
  width: 250px;
  height: 46px;
  text-align: center; /* 水平居中核心属性 */
  vertical-align: middle; /* 辅助垂直居中 */
  font-size: 16px;
  font-family: "SansSerif", sans-serif;
  display: inline-block;
  border: 2px solid #007bff; /* 若不用预处理器，替换为具体颜色值即可 */
}

2. 占位符（placeholder）的居中 #

占位符的样式需要通过::placeholder伪元素单独控制，同样要兼顾水平和垂直位置：

• 水平居中：和textarea文本一样，用 text-align: center；
• 垂直居中：不同浏览器对placeholder的默认垂直对齐处理有差异，示例里用padding-top: 14px来调整垂直位置，确保它和输入文本的居中状态一致。

对应的CSS代码：

.username::placeholder {
  padding-top: 14px;
  text-align: center;
  vertical-align: middle;
  color: #6c757d; /* 替换为具体颜色值，若不用预处理器 */
  overflow: hidden;
}

小提醒 #

如果用的是Sass/Less这类CSS预处理器，示例里的$blue、$grey-blue变量直接用就行；要是写原生CSS，记得把这些变量替换成具体的十六进制/RGB颜色值哦。

内容的提问来源于stack exchange，提问作者justinoreilly23