My Color　「ダンクハーツ-谷春樹Blog-」

縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign="middle"を当てること。
でも、縦にセンタリングするためだけにテーブルつかうのもスマートじゃないし。。。ってときに使えるテクニック。

有名なテクニックで１行の場合のみできるCSSテクニックがあります。
記述方法は下記のようになります。

使用例

CSS

.box {
    height:100px;
    line-height:100px;
    background:#fff4f4;
}

HTML

<div class="box">
    この文章がセンタリングされます。
</div>

表示
このようにheightとline-heightを同じ値にすると縦のセンタリングが適用されます。
ただし、一行のみの場合しかうまくセンタリングされません。


複数行の場合は下記のように記述します。

使用例

CSS

div.box{
    height:100px;
    background:#fff4f4;
}

div.box div{
    display:table-cell;
    margin-bottom:1px;
    vertical-align:middle;
    width:150px;
}

* html div.box div{/* IE 6 */
    display:inline;
    zoom:1;
}

*:first-child+html div.box div{/* IE 7 */
    display:inline;
    zoom:1;
}

HTML

<div class="box">
    <div>
        ここの文章がセンタリングされます。
    </div>
    <div>
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。
    </div>
    <div>
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。<br />
        ここの文章がセンタリングされます。
    </div>
</div>

表示