Center a container Example

by Andrew Holloway

HTML

<html>
    <body>
        <div class='outer-container'>
            <div class='inner-container'>
                <div class='content'>
                    Resize the Window
                </div>
            </div>
        </div>
    </body>
</html>

CSS

html {
    color: #333;
    font-size: 62.5%;
    height: 100%;
    min-height: 100%;
}

body {
    background-image: -moz-linear-gradient(top, #ddd 0%, #333 100%);
    backgrond-image: linear-gradient(top, #ddd 0%, #333 100%); 
    height: 100%;
}

.outer-container {
    display: table;
    height: 100%;
    width: 100%;
}

.inner-container {
    display: table-cell;
    margin: 10px auto;
    vertical-align: middle;
}

.content {
    border-radius: 5px;
    background-color: #EEE;
    box-shadow: 0 1px 2px rgba(0,0,0,0.8), inset 1px 1px 1px rgba(255,255,255, 1), inset -1px -1px 1px rgba(0,0,0,0.3);
    font-family: "Andale Mono", "Consolas", "Comic Sans MS", monospace;
    font-size: 12pt;
    line-height: 14pt;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    text-shadow: 0 1px 0px #FFF;
    width: 125px;
}

JavaScript

// No code. This shows how one might center an element on the page