How do a center a DIV in CSS?

Factual Questions
1

I’m trying to center a div tag at the bottom of my screen in CSS. I’ve looked it up online and it seems simple to do but I just can’t figure it out and/or understand what I’m doing with it. Do you think someone could explain it a little to me? Or point me to a reference that does a good job at it?

Thanks

2

http://tutorials.alsacreations.com/centrer/
http://www.w3.org/Style/Examples/007/center.html

3

cool, thanks.
Hey, while I’m at it, does anyone know if you can pass literal values from a CSS? I haven’t looked much into it but I was just curious if I could have a word or phrase appear at the bottom of every page utilizing a CSS.

4

Uh, you can sorta do that, I guess. It would be like this:



.footer { blahblah; }
.footer:after { content: "your phrase would go here"; }

Play around with it… not all browsers support that pseudo-element, so be careful with it.

5

That’s not really what CSS is for. The purpose of CSS is to separate design from content. If you want a common footer on every page, look into something like server-side includes.

6

You would make the right and left margins “auto” like this:

#bottomdiv {
margin: 0 auto;
}

Where the 0 is the margin for the top and bottom, and you can change that if you need to. Auto is for the right and left margins and that centers it. If you wanted different top and bottom margins it could look like this:

#bottomdiv {
margin: 5px auto 20px auto;
}

It goes clockwise: top, right, bottom, left…

7

well, I’m trying what you guys are suggesting, and its working to some degree. The DIV is centering around the text so that when I apply a border, it is against the text that is on the page. However, I’m still having problems.

I can’t get the actual DIV to center in the page. It is still appearing in the lower left hand corner. Here is my DIV, maybe I’m just doing something wrong? I keep trying to add code to align it in the div tag (IE align:“center” or align: “center”) but nothing seems to be working.

div.footer
{

float:bottom;
text-align:center;
padding:0.5em;
color:black;
background-color:b0c4de;
clear:left;
font-size: 70%
margin-left: auto;
margin-right:auto;
width = 500px;
border:2px solid white

}

8

You’re using an “=” in your “width” instead of a “:”. Not 100% sure, but that may be your problem.

9

:smack: Didn’t see that but unfortunately, that didn’t fix it.

10

Oh, you need a semi-colon after 70%. That did it.

11

float: bottom; does not exist in the CSS standards. A float will only shift left or right.
Assuming you want to position the footer at the bottom of the browser window regardless of the content amount above it, go here —> The Man in Blue > footerStickAlt: A more robust method of positioning a footer

12

If wasson’s suggestion doesn’t work, try adding a container div and centering the text from there. Something like this:


div .footercontainer
{
  width: 100%;
  text-align: center;
}

div .footer
{
  /* put your actual footer style in here */
}

Then in the HTML doc:


<div class="footercontainer">
  <div class="footer">
    <b>Mbossa</b> is, without a doubt, one of life's true winners.
  </div>
</div>
13

Nope, none of this is working! In a minute, I’ll load it up to a school site and you can see what I’m talking about.

14

Actually, upon trying this again, it seems to be working. I just have to get that footercontainer to now go to the bottom. Shouldn’t be too much of a trouble. Thanks!