How to center a div block horizontally the simple and easy way

Let’s say you want to design a Website with the content floating in the middle. Some coders like to use liquid layouts, which means that the horizontal width of the content div box changes according to the size of the browser window. Other designers use fixed-width layouts, which means that the width of the content div box will remain the same independent from the size of the browser window.

Click here to view 4 examples of CSS div box centering using fixed-width and percentage width. Additional CSS code has been added to format the text and colorize the div boxes.

How to center a liquid-width div box

First, let’s focus on how to center a liquid-width div box.

The general idea behind liquid-width centering is very simple: just set the same distance for the left margin and the right margin. We’ll use percentage units.

How to center a fixed-width div box

To center a fixed-width div…

both the left and right margins should be set to auto
set the width value for the div box

When both left and right margins are auto, web browsers give them equal width.

Like this:

I tested this CSS code with the following browsers:

Internet Explorer 7
Mozilla Firefox 2
Safari 3

Here is the code for 4 examples of div box centering.

body {
    font-family:"Myriad Pro", Arial, sans-serif, monospace;
    font-size:1em;
    color:#333333;
}

.group {
    background-color:#F1F1F1;
    border:1px #CCCCCC solid;
    margin-top:50px;
    margin-bottom:50px;
    text-align:left;
}

Liquid div centering horizontally

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.

Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.

Liquid div centering horizontally inside another liquid-width div

Center fixed-width div horizontally

Horizontal centering fixed-width div inside another fixed-width div

This entry was posted on Friday, January 15th, 2010 at 10:19 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

CodeRemix