How do you center align in CSS with the style tag?

Question

How do I align this to the center of the page? http://jsfiddle.net/WH7Kf/39/

<div id="lower" style="position:fixed; width:95%; height:5%; background-color:green; ">

There are several questions on this site on vertically aligning divs, but for a quick and dirty solution, try `
` — Traveling Tech Guy, May 06 '14 at 02:39
it's not a duplicate, since it doesn't do anything in JSfiddle: http://jsfiddle.net/WH7Kf/66/ — a coder, Jul 11 '14 at 20:06
The answers at the duplicate absolutely do work. You just can't *tell* because your fiddle in your above comment sets no background color, and is probably being viewed in a viewport less than 800px wide. [See this updated fiddle](http://jsfiddle.net/PmVha/) — Andrew Barber, Jul 11 '14 at 20:38
How do I delete it, or whatever I need to do now to work on chipping away my ban? — a coder, Jul 11 '14 at 22:02
that's what I did over the time when I started accidentally :'( how do I undelete old questions that were from 30+ days ago? — a coder, Jul 12 '14 at 01:46

score 2 · Accepted Answer · answered May 06 '14 at 02:42

You can either do it this way:

margin-left:auto;
margin-right:auto;

Inside your style or you can also use the positioning property as well:

position:absolute;
top:0%;
left:50%

There isn't a set way to center something, but these are ways that it can be done. Hope this helps!

score 1 · Answer 2 · answered May 06 '14 at 02:41

1

You can align block-level elements using margin:0 auto;:

<div id="lower" style="margin:0 auto; width:95%; height:5%; background-color:green; ">

This works because you define the margin on the right and left side to be determined automatically, so it'll be in the very middle of the page.

answered May 06 '14 at 02:41

Joeytje50

@downvoter, mind explaining why you downvoted this answer? – Joeytje50 May 06 '14 at 02:42
1

I don't understand why this answer has been down-voted, this is what the OP asked. – Gopinath Koothaperumal May 06 '14 at 02:44
1

What if he wants the div fixed positioned? – j08691 May 06 '14 at 02:50

score 1 · Answer 3 · answered May 06 '14 at 02:55

Here you go.

#lower {
    position:fixed;
    left:0;
    right:0;
    width:95%;
    height:5%;
    background:green;
    margin:auto;
}

If you want to make the div get literary centered both vertical and horizontal, add top:0; and bottom:0;

3 Answers3