如何让textarea输入框内容始终保持垂直居中？

原生<textarea>的内容布局由浏览器默认控制，vertical-align属性无法直接作用于其内部文本。要实现你需要的效果，纯CSS无法完全满足需求，但可以通过CSS + 少量JavaScript结合的方式，仅基于textarea实现：

步骤1：CSS基础样式调整 #

先给textarea设置适配居中需求的基础样式：

textarea {
  resize: none;
  width: 300px;
  height: 200px;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

步骤2：JavaScript动态计算垂直偏移 #

核心逻辑是每次内容变化时，计算内容实际高度与textarea容器高度的差值，通过调整scrollTop让内容始终保持垂直居中，内容超出容器时实现从中间向外扩展的效果：

const textarea = document.querySelector('textarea');

function centerTextareaContent() {
  const contentHeight = textarea.scrollHeight;
  const scrollOffset = Math.max(0, (textarea.clientHeight - contentHeight) / 2);
  textarea.scrollTop = scrollOffset;
}

// 监听内容输入事件
textarea.addEventListener('input', centerTextareaContent);
// 页面加载初始化
window.addEventListener('load', centerTextareaContent);

效果说明 #

• 内容较少时，文本完全垂直居中显示；
• 内容增多至超过textarea高度时，新增内容会从中间向上下两侧扩展，通过滚动逐步显示超出部分；
• 若设置了line-height，scrollHeight会自动包含行高影响，无需额外调整计算逻辑。

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