Absolute Centering

Absolute centering demo

by Cameron Bernhardt

HTML

<div id="body"></div>

<p id="center">Center!</p>
<p id="left">Uncenter!</p>

CSS

#body {
    background-color: blue;
    height: 20px;
    width: 20px;
}

p{
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

$('#center').click(function(){
    document.getElementById('body').style.margin = "auto";
    document.getElementById('body').style.left = 0;
    document.getElementById('body').style.right = 0;
    document.getElementById('body').style.top = 0;
    document.getElementById('body').style.bottom = 0;
    document.getElementById('body').style.position = "absolute";
    document.getElementById('body').style.textAlign = "center";
});

$('#left').click(function(){
    document.getElementById('body').style.margin = "";
    document.getElementById('body').style.position = "relative";
    document.getElementById('body').style.textAlign = "left";
});