css:center_aligned

Center Align Horizontal and Vertical

Although we can make it possible with margin, and positions relative and absolute with negative margin-left.

There's a solution including display as tables:

<body>
    <div id="body">
        Content goes here
    </div>
</body>

html,
body {
    width:100%;
    height:100%;
}
html {display:table;}
body {
    display:table-cell;
    vertical-align:middle;
}
#body {
    max-width:50em;
    margin:0 auto;
}
 
/* Flexible heights */
#body {
    max-width:50em;
    height:300px;
    overflow:auto;
    margin:0 auto;
}

Links

Flexible Height + Vertical Centering CSS

css/center_aligned.txt · Last modified: 2011/03/11 00:09 by nejo