html – Center the texture horizontally and vertically

I want to center the texture vertically and horizontally. It needs to be responsive (I want it to resize when the window is resized. I can’t do that. Please help me 🙂

The code is as follows:

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

}

Write a Comment