CSS の垂直方向の中央揃え方法の概要_html/css_WEB-ITnose

1. コンテナをテーブルセルとして扱います

<div class="middle-demo1">    <button>按钮</button></div>

.middle-demo1{ display: table-cell; height: 100px; //可以动态改变高度，这里只是演示 vertical-align: middle; border: 1px solid #666; }

ブラウザのサポート:
http://caniuse.com/#search=table-cell

2. 固定高さの要素を垂直方向に中央に配置します

<div class="middle-demo2">    <div class="g-box"></div></div>

.middle-demo2{ position: relative; width: 200px; height: 200px; border: 1px solid #666; }.g-box{ position: absolute; top: 50%; width: 100px; height: 100px; margin-top: -50px; background-color: deepskyblue; }或者.g-box{ position: absolute; top: 50%; width: 100px; height: 100px; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); background-color: deepskyblue; }

注: 垂直方向の中央に配置される要素 (g-box) は、高さが固定されている必要があります (js の動的計算設定を除く)。
ブラウザーによる変換のサポート http://caniuse.com/#search=transform

3. 固定高さの要素は垂直方向に中央揃えになります

<div class="middle-demo3">    <div class="g-box2"></div>    <div class="g-box3"></div></div>

g-box3 は垂直方向に中央揃えにする必要がある要素です

.middel-demo3{ position: relative; width: 200px; height: 200px; border: 1px solid #666; }.g-box2{ height: 50%; margin-bottom: -50px; }.g-box3{ height: 100px; background-color: deepskyblue; }

手順: 垂直方向の中央に配置される要素 (g-box3) は、高さが固定されている必要があります。

4. 可変の高さで要素を垂直方向に中央揃えにする

<div class="middle-demo4">    <div class="g-box4"></div></div>

.middle-demo4{ position: relative; width: 200px; height: 200px; border: 1px solid #666; }.g-box4{ position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 100px; height: 100px; background-color: deepskyblue; }

手順: 垂直方向に中央揃えにする必要がある要素 (g-box4) は、固定の高さである必要はありません。ブラウザーは IE8+ およびその他のブラウザーをサポートします。より良いサポートがあります

5、単一行のテキストは垂直方向に中央揃えです

<div class="middle-demo5">    <span>单行文本</span></div>

.middle-demo5{ height: 100px; line-height: 100px; border: 1px solid #666; }

注:は内部ブロック要素には無効です

6 コンテナの高さは固定または可変であり、複数行のテキストは垂直方向に中央揃え

<div class="middle-demo6">    <p>单行文本</p>    <p>多行文本</p></div>

.middle-demo6{ display: table-cell; vertical-align: middle; height: 200px; //容器可以不定高，这里只是演示 border: 1px solid #666; }

7.vertical-align の実装インライン要素は垂直方向に中央揃えです

<div class="middle-demo7">    <span class="g-fix"></span>    <button class="g-box7">行内元素</button></div>

.middle-demo7{ position: relative; width: 200px; height: 200px; border: 1px solid #666; }.g-fix{ display: inline-block; width:0; height: 100%; vertical-align: middle; }

手順: ブラウザのサポート http://caniuse.com/#search=inline-block