css position:fixedで縦横中央に要素を配置する

translateを使う方法

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

元記事はこちら：
http://stackoverflow.com/a/26962247/5209556

元記事によると、translateを使うと3Dアクセラレーションが有効になるため、divの中の文字がぼやける、そこで対策として-webkit-font-smoothingを使えと書いてある。
確かにMacのChromeでぼやける現象が発生した。

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; /* Safari での Default値 */

いずれを指定しても直らなかった。

calcを使う方法

.center{
    position: fixed;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2);
    left:calc(50% - 50px/2);
}

jQueryを使う方法

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}