How can I center the "input" tag in CSS?

November 15, 2023

Im trying to customize "input" in CSS this is code I write:

  input {
    background-color:black;
    border-color: blueviolet;
    outline-color:peru;
    color: crimson;
    height: 50px;
}

And I want to put the "input" tag in the middle.

I tried:

text-align: center;

but didn’t work

>Solution :

One way you can center an element in its parent container is by making it display: block and setting the margin to auto:

input {
    background-color:black;
    border-color: blueviolet;
    outline-color:peru;
    color: crimson;
    height: 50px;
    margin: auto;
    display: block;
}

<input>

Another could be by using flex-box styling:

body {
    display: flex;
    justify-content: center;
}

input {
    background-color:black;
    border-color: blueviolet;
    outline-color:peru;
    color: crimson;
    height: 50px;
}