水平和垂直居中文本区域

Question

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

代码如下：

        <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;
    }

}

Answer 1

有人会建议使用 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%);
}

Answer 2

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

所以这是我的答案：

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

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

你也可以用 flex:

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

水平和垂直居中文本区域

Centering textarea horizontally and vertically

html

css

textarea