Centering textarea horizontally and vertically

user_17081122 0
Viewed 40

I want to center textarea vertically and horizontally. It needs to be responsive (i want it to change its size when window resizes. I can't get this working. Please help me :)

Code is below:

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

}
textarea css html
2 Answers

I was almost gonna use flex, but then I saw @CuteCodeRobs answer...

So here is my answer:

The shortest way to center an element is this:

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

You can also do this with flex:

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

Somebody is going to suggest an answer using flex which would be better for modern standards but this will also work in your 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%);
}
user_171534650
Related