# How do a center a DIV in CSS? **URL:** \ **Category:** Factual Questions\ **Created:** [March 26, 2007, 3:14pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550 "2007-03-26T15:14:21Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 3:14pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/1 "2007-03-26T15:14:21Z")
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 ---
**Author:** ![Gfactor](https://avatars.discourse-cdn.com/v4/letter/g/9de053/32.png) [@Gfactor](https://boards.straightdope.com/u/Gfactor)\ **Post date:** [March 26, 2007, 3:22pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/2 "2007-03-26T15:22:20Z")
> **[CSS centering - fun for all! - Max Design](https://www.maxdesign.com.au/articles/center.html)** > > How do you center a containing block on a page using CSS [http://tutorials.alsacreations.com/centrer/](http://tutorials.alsacreations.com/centrer/) [http://www.w3.org/Style/Examples/007/center.html](http://www.w3.org/Style/Examples/007/center.html) ---
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 4:34pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/3 "2007-03-26T16:34:59Z")
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. ---
**Author:** ![wasson](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@wasson](https://boards.straightdope.com/u/wasson)\ **Post date:** [March 26, 2007, 4:51pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/4 "2007-03-26T16:51:27Z")
Uh, you can sorta do that, I guess. It would be like this: ```auto .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. ---
**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\ **Post date:** [March 26, 2007, 5:04pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/5 "2007-03-26T17:04:44Z")
[QUOTE=Surbey] 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. [/QUOTE] 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. ---
**Author:** ![Green\_Cymbeline](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/green_cymbeline/32/9244_2.png) [@Green\_Cymbeline](https://boards.straightdope.com/u/Green_Cymbeline)\ **Post date:** [March 26, 2007, 5:45pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/6 "2007-03-26T17:45:33Z")
[QUOTE=Surbey] 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 [/QUOTE] 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… ---
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 9:06pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/7 "2007-03-26T21:06:51Z")
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 } ---
**Author:** ![wasson](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@wasson](https://boards.straightdope.com/u/wasson)\ **Post date:** [March 26, 2007, 9:13pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/8 "2007-03-26T21:13:16Z")
You’re using an “=” in your “width” instead of a “:”. Not 100% sure, but that may be your problem. ---
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 9:22pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/9 "2007-03-26T21:22:10Z")
[QUOTE=wasson] You’re using an “=” in your “width” instead of a “:”. Not 100% sure, but that may be your problem. [/QUOTE] :smack: Didn’t see that but unfortunately, that didn’t fix it. ---
**Author:** ![wasson](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@wasson](https://boards.straightdope.com/u/wasson)\ **Post date:** [March 26, 2007, 9:29pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/10 "2007-03-26T21:29:19Z")
Oh, you need a semi-colon after 70%. That did it. ---
**Author:** ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)\ **Post date:** [March 26, 2007, 9:41pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/11 "2007-03-26T21:41:15Z")
[QUOTE=Surbey] 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 } [/QUOTE] float: bottom; does not exist in the CSS standards. A float will only shift [left or right](http://www.w3.org/TR/REC-CSS2/visuren.html#floats). Assuming you want to position the footer at the bottom of the browser window regardless of the content amount above it, go here —\> [http://www.themaninblue.com/writing/perspective/2005/08/29/](http://www.themaninblue.com/writing/perspective/2005/08/29/) ---
**Author:** ![Mbossa](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@Mbossa](https://boards.straightdope.com/u/Mbossa)\ **Post date:** [March 26, 2007, 9:43pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/12 "2007-03-26T21:43:10Z")
If **wasson** ’s suggestion doesn’t work, try adding a container div and centering the text from there. Something like this: ```auto div .footercontainer { width: 100%; text-align: center; } div .footer { /* put your actual footer style in here */ } ``` Then in the HTML doc: ```auto
Mbossa is, without a doubt, one of life's true winners.
``` ---
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 9:47pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/13 "2007-03-26T21:47:22Z")
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. ---
**Author:** ![Surbey](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@Surbey](https://boards.straightdope.com/u/Surbey)\ **Post date:** [March 26, 2007, 9:50pm UTC](https://boards.straightdope.com/t/how-do-a-center-a-div-in-css/397550/14 "2007-03-26T21:50:16Z")
[QUOTE=Mbossa] If **wasson** ’s suggestion doesn’t work, try adding a container div and centering the text from there. Something like this: ```auto div .footercontainer { width: 100%; text-align: center; } div .footer { /* put your actual footer style in here */ } ``` Then in the HTML doc: ```auto
Mbossa is, without a doubt, one of life's true winners.
``` [/QUOTE] 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!