【CSS】縦センタリング(CSS3のboxを使用)

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

by tea4two

HTML

<div class="button">
    <p>button text</p>
</div>

<div class="button">
    <p>button text<br />
    multi</p>
</div>

CSS

.button {
    border: 1px dotted #ddd;
    height: 80px;
    background: #efefef;
    display: box;
    display: -moz-box;
    display: -webkit-box;
    
    /*親ボックスに対する縦位置
    http://www.htmq.com/css3/box-align.shtml
    */
    box-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    
    /*親ボックスに対する横位置
    http://www.htmq.com/css3/box-pack.shtml
    */
    box-pack: start;
    -moz-box-pack: start;
    -webkit-box-pack: start;
    
    text-align:center;
}
.button p {
    background: #f00;
}