将 textarea 水平和垂直居中

Posted 2023-05-07

【中文标题】将 textarea 水平和垂直居中

【英文标题】：Centering textarea horizontally and vertically

【发布时间】：2022-01-09 05:14:47

【问题描述】：

我想将 textarea 垂直和水平居中。它需要响应（我希望它在窗口调整大小时改变它的大小。我无法让它工作。请帮助我:)

代码如下：

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

.name-input-container
    width: 100vw;
    height: 100vh;
    background-color: #001f3f;
    color: 80BFFF;
    z-index: 9999;

    #text-name
        resize: none;
        transform: translateY(+200%);
        width: 75%;
        height: 20%;
        display: table;
        margin: 0 auto;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        line-height: 600%;
        text-align: center;
        font-size: 30px;
        border: 2px solid #00172e;
        background-color: #001a35;
        border-radius: 75px;
    

【参考方案1】：

我几乎要使用 flex，但后来我看到 @CuteCodeRobs 回答...

所以这是我的答案：

使元素居中的最短方法是：

parent-element 
  display: grid;
  place-items: center

你也可以用 flex 做到这一点：

parent-element 
  display: flex;
  justify-content: center;
  align-items: center;

【参考方案2】：

有人会建议使用 flex 的答案，这对于现代标准会更好，但这也适用于您的 CSS。

.name-input-container 
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);