为什么我的textarea无法精确居中，窗口缩放时也无法保持居中？

问题根源 #

1. 你尝试的align-items/align-content等属性是Flex/Grid布局的专属属性，未给父元素设置对应布局模式时不会生效
2. 当前textarea设置了width: 100% + 左右各20px的margin，总宽度超出父容器可用宽度，导致溢出偏移

解决方案（两种均支持窗口缩放时自动保持居中） #

方案1：修改textarea样式直接实现（改动最小） #

直接替换你原代码中的textarea样式即可：

textarea{
    resize: none; 
    display: block;
    /* 宽度减去左右边距避免溢出 */
    width: calc(100% - 40px);
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
    /* 左右边距设为auto实现水平居中 */
    margin: 20px auto;
}

方案2：给父容器加Flex布局（更适合整体布局统一管控） #

第一步，修改.container样式，新增Flex布局配置：

.container{
    width: 80vmin;
    padding: 50px 30px;
    background-color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 40px;
    /* 新增Flex配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

第二步，修改textarea样式：

textarea{
    resize: none; 
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
    /* 仅保留上下边距，水平居中由父容器Flex规则控制 */
    margin: 20px 0;
}

如果用该方案，还可以给按钮容器.ButtonControl加align-self: flex-end;属性替代float: right，避免浮动带来的高度塌陷问题。

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