Centering with CSS

Centering elements both horizontally and vertically using solely CSS declarations turns out to be a little harder than it probably should be. I'll be adding more demos here as I develop them.

Explicitly sized boxes

These methods use boxes whose height and width have been explicitly set with CSS declarations.

« Back to my workshop

http://www.serve.com/apg/workshop/centerCSS/


http://www.serve.com/apg/workshop/centerCSS/sizedPixel.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    #centerBox {
        width: 400px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -200px;
        border: 1px solid #000;
        
    }
    
    #centerBox p {
        margin: 10px;
        font-family: Verdana;
        font-size: 13px;
    }
    -->
    </style>
</head>

<body>

<div id="centerBox">
    <p>This is a fixed-size div that should be centered both horizontally and
    vertically in the browser window.</p>
    <p><a href="../"><b>&laquo; Back to my workshop.</b></a></p>
</div>

</body>
</html>