How to center a textarea using CSS?

html css textarea center
Chris picture Chris · Aug 27, 2010 · Viewed 91.9k times · Source

Forgive me for asking such a simple question, I'm new to both HTML and CSS. Is there an easy way to center a textarea? I figured I'd just try using

textarea{
    margin-left: auto;
    margin-right: auto;
}

but it (obviously?) didn't work.

Answer

Douglas picture Douglas · Aug 27, 2010

The margins won't affect the textarea because it is not a block level element, but you can make it display block if you like:

textarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

before and after

By default, textareas are display: inline, which is why you can put them side-by-side easily, and why the text-align: center answers work too.

The textarea can also be centered by putting it inside a flexbox container like this:

<style>
    div.justified {
        display: flex;
        justify-content: center;
    }
</style>

<div class="justified">
    <textarea>Textarea</textarea>
</div>

Related questions

Justify and Center <textarea> text HTML/CSS?

I have a textarea and I want it to be justified so all the lines are equal in width and to be centered to the text stays in the middle of the textarea when it's not at maximum line length. …

Read More
Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions: Use CSS or use the textarea's attributes cols and rows? What are the pros and cons of …

Read More
How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address. Now I think it would look much nicer, if the textarea I'm …

Read More