如何在文本域中垂直居中文本？

Question

有没有办法在已知宽度和高度的文本区域中垂直居中输入的文本？我有一个固定大小的文本区域，需要在其中输入文本，并且希望文本从中心开始输入。可以使用text-align:center实现水平居中，但是我找不到任何水平对齐的方法。

- Kostsei

---

请提供一些代码，请问你尝试了什么？ - Andrea Bori

请查看此链接：http://codepen.io/desandro/pen/gICqd - Raziza O

Answer 1

我认为你无法直接进行垂直对齐。您应该创建另一个div覆盖文本区域，并使用它使文本垂直对齐，然后从用户获取到文本区域的输入，并使用JS将其传输到div中。

并且只需使textarea不可见即可。

- Santosh Khanal

Answer 2

虽然不是一个 <textarea />，但在视觉上完成了任务：

// you don't need JS, just demo-ing `input` eventListener works:
document.querySelector('.textarea').addEventListener('input', e => {
    console.log(e.target.innerText);
})

.textarea {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  resize: both;
  overflow: auto;
  max-height: 60vh;
  min-height: 4rem;
  min-width: 200px;
  border: 1px solid #ccc;
  font-family: monospace;
}
.textarea:focus {
  border: 1px solid blue;
}

<div class="textarea" contenteditable="true">
  not exactly a textarea...
</div>

- tao