如何使textarea内光标垂直居中？需保留absolute定位

textarea光标垂直居中难处理，主要因为它默认内容从顶部排版，再加上你用了百分比高度和padding，直接用line-height容易因父元素高度不确定失效。下面给你两个可行方案：

方案1：Flex布局实现（推荐） #

给.tile-text-input添加flex相关样式，利用align-items:center让内容垂直居中，同时处理内容溢出的滚动问题：

.tile-text-input {
    height: 23%;
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translate(-50%);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    /* 新增flex样式 */
    display: flex;
    align-items: center;
    overflow: auto;
    /* 移除无效的vertical-align，它对块级/flex元素不起作用 */
}

原理：flex布局的align-items:center会让textarea内部的内容容器自动垂直居中，光标自然跟着居中，且适配百分比高度，无需手动计算数值。

方案2：计算line-height匹配内容高度 #

如果不想用flex，可以通过calc计算内容区域高度，将line-height设置为该值：

.tile-text-input {
    height: 23%;
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translate(-50%);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    /* 计算内容高度：总高度减去上下padding的总和 */
    line-height: calc(23% - 30px);
}

注意：这个方法要求textarea的父元素必须设置明确高度（比如100vh或固定像素高度），否则百分比高度无法生效，line-height也会失效。

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