I'm using a section tag instead of a div and I need to move it to the very center of the screen

Question

Here's my form and section code:

<section class="loginform tmr">
    <form name="login" action="index_submit" method="get" accept-charset="utf-8">
        <ul>
            <li><label for="usermail">Email</label>
                <input type="email" name="usermail" placeholder="yourname@email.com" required>  
            </li>
            <li><label for="password">Password</label>
                <input type="password" name="password" placeholder="password" required> 
            </li>
            <li><input type="submit" value="Login"></li>
        </ul>
    </form>
</section>

Perhaps I am just doing it wrong but I have tried margin: 0 auto and also display: inline-block.

I do not want to use position: relative because I fear it will be all over the place on different monitors.

Any help for the most sound and efficient way to accomplish this rather simple task would be great. Thanks in advance.

score 2 · Accepted Answer · answered Dec 26 '13 at 23:41

2

You can avoid setting a width on the element by using this approach (example)

This works with dynamic content of varying widths. The trick is to change the elements to inline-block and set text-align:center on the parent for centering.

body { text-align:center; }
section, form {
    display:inline-block;
}

Alternatively, set a width on the section element, and use margin:0 auto. By default a section is a block level element which functions as though it has a width of 100%. Therefore you would need a width in order to center it. (example)

answered Dec 26 '13 at 23:41

Josh Crozier

233,099
56
391
304

That works great but it's centered at the top of the screen I need it to drop down to the middle as well, in the center of the top and bottom as well as left to right. – cooking good Dec 26 '13 at 23:46
1

I think he is saying he wants it vertically and horizontally centered. – Josh Mein Dec 26 '13 at 23:48
If you want vertical centering as @JoshMein suggests, take a look at this old answer of mine. http://stackoverflow.com/questions/19440672/html-vertical-align-failed/19440725#19440725 ... alternatively you can also look at this one http://stackoverflow.com/questions/19461521/how-to-center-text-horizontally-and-vertically/19461564#19461564 – Josh Crozier Dec 26 '13 at 23:49
Yes @JoshMein, dead center in the middle of the screen. – cooking good Dec 26 '13 at 23:49

Josh Mein · Answer 2 · 2013-12-26T23:45:37.783

1

You need to have a width set on your section in order for margin:0 auto to work.

CSS:

.loginform
{
    margin:0 auto;
    width:300px;
}

Live Demo

edited Dec 26 '13 at 23:45

answered Dec 26 '13 at 23:40

Josh Mein

28,107
15
76
87

I'm using a section tag instead of a div and I need to move it to the very center of the screen

2 Answers2