Place input box at the center of div

Question

I have a div, and I want the input box to be place at it\'s center. How can I do this?

Answer 1

Here's a rather unconventional way of doing it:

#inputcontainer
{
    display:table-cell; //display like a  to make the vertical-align work
    text-align:center; //centre the input horizontally
    vertical-align:middle; //centre the input vertically


    width:200px; //widen the div for demo purposes
    height:200px; //make the div taller for demo purposes
    background:green; //change the background of the div for demo purposes
}

It might not be the best way to do it, and margin​ won't work, but it does the job. If you need to use margin, then you could wrap the div that displays as a table cell in another 'normal' div.

JSFiddle: http://jsfiddle.net/qw4QW/