如何实现textarea水平垂直居中且具备响应式自适应特性

实现方案 #

你原有代码的核心问题是通过固定百分比偏移实现垂直居中，窗口大小变化后偏移值会失效，可通过flex布局实现稳定的双向居中，同时优化响应式适配逻辑：

原HTML代码无需修改

<div class="name-input-container">
    <textarea id="text-name" placeholder="Enter your name..." min="3" maxlength="15"></textarea>
</div>

修正后的CSS代码

如果使用原生CSS（不支持嵌套语法）：

.name-input-container{
    width: 100vw;
    height: 100vh;
    background-color: #001f3f;
    color: #80BFFF; /* 修复原代码缺少#的语法错误 */
    z-index: 9999;
    /* 新增flex布局实现子元素双向居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#text-name{
    resize: none;
    /* 移除原有的无效居中属性：transform、display: table、margin: 0 auto */
    width: 75%;
    /* 可选：加最大宽度限制，避免超大屏输入框过宽 */
    max-width: 800px;
    height: 20%;
    /* 可选：加最大高度限制 */
    max-height: 200px;
    box-sizing: border-box;
    line-height: 1.2; /* 用相对行高适配动态字体大小 */
    text-align: center;
    /* 用clamp实现字体大小动态响应式适配 */
    font-size: clamp(16px, 5vw, 36px);
    border: 2px solid #00172e;
    background-color: #001a35;
    border-radius: 75px;
    color: #80BFFF;
}

如果使用Less/Scss等支持嵌套的预处理器，可沿用嵌套写法：

.name-input-container{
    width: 100vw;
    height: 100vh;
    background-color: #001f3f;
    color: #80BFFF;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

    #text-name{
        resize: none;
        width: 75%;
        max-width: 800px;
        height: 20%;
        max-height: 200px;
        box-sizing: border-box;
        line-height: 1.2;
        text-align: center;
        font-size: clamp(16px, 5vw, 36px);
        border: 2px solid #00172e;
        background-color: #001a35;
        border-radius: 75px;
        color: #80BFFF;
    }
}

优化说明

• flex布局适配所有窗口尺寸，无需手动计算居中偏移，完全自动实现双向居中
• clamp()动态控制字体大小，小屏不重叠、大屏不过大，随窗口自动缩放
• 可选的最大宽高限制，可根据实际需求调整阈值
• 修复了原代码中颜色值缺少#的语法错误

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