How to center div with CSS. All browsers (IE6, Firefox, Safari …)

Written by Alexander. Posted in Uncategorized

Centering elements is very common task for web developer, and there are some tricks how to center elements with CSS quickly.

How to center <div> with CSS

It can be difficult to believe, but centering div elements in browser with css is very easy, and it's works in all browsers, including IE6.

To center div with CSS you have to set both left and right margin of element to auto and set width for element, nothing more!!!

How to center a div element in IE6

Live example how to center a div element (cross browser)

But if you need to center div element just inside of <body> tag this trick will not work in IE6, but it can be easy solved with setting text-align:center for body tag.

To center div with CSS inside of body tag use the follow source code

 

<html>
<head>
    <style type="text/css">
        body
        {
            text-align: center; /* for IE */
        }  

        .center
        {
            margin:10px auto;
            width:400px;
            border:solid 1px red;
            text-align:center;
            height:200px;
            padding:20px;
        }

        .inner
        {
            width:50%;
            border:solid 1px green;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="center">
        This text shoud be align center.
        <div class="center inner">
            and this text shoud be centered inside parent element
        </div>
    </div>
</body>
</html>

Trackback from your site.

Leave a comment