Center a website horizontally and vertically using CSS

Let’s say that you have a website or a div that you need to place in the center of of the page both horizontally and vertically. You may be creating a pop-up window or a centered website, as long as your site has a set height and width it’s easy to center it.

As an example let’s assume that your website is 800px wide and 400px high. Here is the HTML along with the CSS to center this website exactly in the middle of the page horizontally and vertically.

The HTML:


<div class="center">
Your website goes here.
</div>

The CSS:


.center {
width: 800px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -200px;
}

Basically you just need to make sure that the left margin is half of your website width and that the top margin is half of the website height. If you only want to center your website horizontally then simply remove the “top:50%” and “margin-top:-200px” from the CSS.

(Awesome meditation image by Emils Blums).

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. imran khan on August 13, 2010

      Nice Adham!!!!

      No one knows its damn easy =)

    2. Ahmed Ibraim on August 13, 2010

      thank you very much man, I did used in flash intro page,
      amazing…
      Thanks alot…

    3. Libby on August 15, 2010

      This is a great tip, thanks!! by the way, this website is SO cool! I love the design!

    4. saqib sarwar on August 15, 2010

      very simple and nice trick. thanks for sharing

    5. Brett Widmann on September 14, 2010

      Excellent and insightful post! It’s short and to the point, and can easily be implemented for any site. 🙂

    6. ivyaj on October 3, 2010

      how do you keep from cutting off the top and sides when the screen is smaller than your site?

    7. Cre8ive Commando on October 9, 2010

      @ivyaj – I would probably use “margin:auto” instead of absolute positioning. Alternatively you could use some JS to detect the size of the window and adjust your positioning accordingly. 🙂

    8. Liliana Gaete on October 19, 2010

      Nice and simple 🙂 Thanks for sharing!

    9. Raven on January 20, 2011

      Why not use “margin:auto;”?

    10. Cre8ive Commando on January 20, 2011

      @Raven – Why not indeed. This is just another way of doing it in case you can’t use margin:auto; 🙂

    11. kulpreets on March 9, 2011

      @Raven – yes you can use “margin:auto” but that will only center the website/element horizontally and not “vertically”.

      @adham – Thanks for sharing such a simple & neat approach. 🙂

    12. José Luis Pizarro Feo on April 21, 2011

      You can use margin:0 auto if you indicate the width property in div.

    Trackbacks

    1. […] This post was mentioned on Twitter by Adham Dannaway and Andrew Mathison, Nigel No Mates. Nigel No Mates said: Center a website horizontally and vertically using CSS: Let’s say that you have a website or a div that you need t… http://bit.ly/aEpNK5 […]


    0

    Have your say!