1. 17:10 21st Jul 2010

    Simple element centering using jQuery

    HTML

    <div>centered</div>​​

    CSS

    div{
width:150px;
height:150px;
background-color:red;
color:white;
line-height:150px;
text-align:center;
position:absolute;
}​

    JavaScript

    var $div = $('div');

$div.css({
    top:'50%',
    left:'50%',
    margin:'-'+($div.height() / 2)+'px 0 0 -'+($div.width() / 2)+'px'
});​

    Source: Cody Lindley, Code Snippet, Tweet