css 垂直方向のセンタリングを実現する 5 つの方法_html/css_WEB-ITnose

要約:

ページを作成するときに、コンテンツを垂直方向に中央揃えする必要があることがよくあります。今日は、それぞれの方法に独自の長所と短所があります。以下のコードは私が個人的にテストしたものです。

line-height：

<style>        .content {            height:240px;            line-height: 240px;        }    </style><div class="content">        vertical-align:middle;    </div>

:before：

<style>        .content {            height: 240px;        }        .child:before {            content: ' ';            display: block;            height: 120px;        }    </style><div class="content">        <div class="child">

　　　　　　vertical-align:middle;</div></div>

padding-top：

<style>        .content {            height:240px;        }        .child {            padding-top: 120px;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>

position:absolute：

<style>        .content {            position:absolute;            height:240px;        }        .child {            position: relative;            top:50%;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>

ディスプレイ:テーブルセル;

概要:

上記のコードはChromeでテストしたものですが、一部IEでは問題が発生する可能性がありますのでご利用の際はご注意ください。