文字の縦横の中央配置を行いたい場面があるのだが、どうやればよいかわからなくなるので、メモ。

CSS

#wappper{
    height:100%;
    width:100%;
}
#center{
    display: table;
    width: 100%;
    height: 100%;
}
#center_cell{
    color: red;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

HTML

<div id="wappper">
    <div id="center">
        <div id="center_cell">
            center
        </div>
    </div>
</div>

デモ
https://dl.dropboxusercontent.com/u/3482475/index.html