ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで垂直方向の中央揃えを行う方法は何ですか
方法: 1. "display:table-cell;vertical-align:middle;" スタイルを使用します。 2. フレックス レイアウトを使用します。 3. 絶対配置と負のマージンを使用します。 4. 絶対配置と変換を使用します。属性; 5. 絶対位置と上や左などの属性を使用します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
垂直方向のセンタリングは、レイアウトにおける非常に一般的な効果の 1 つです。良好な互換性を実現するために、PC 側で垂直方向のセンタリングを実現する方法は、一般に、絶対位置決め、テーブルセル、ネガティブマージンなどの方法を使用します。 。 CSS3 では、モバイル端末の垂直方向のセンタリングがより多様になります。
#方法 1: テーブルセル
html 構造:<div class="box box1"> <span>垂直居中</span> </div>css:
.box1{ display: table-cell; vertical-align: middle; text-align: center; }
方法 2: display:flex
.box2{ display: flex; justify-content:center; align-items:Center; }
方法 3: 絶対位置と負のマージン
.box3{position:relative;} .box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; }
方法 4: 絶対配置と 0
.box4 span{ width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }この方法は上記と似ていますが、ここでは、margin:auto と上、左、右、下を 0 に設定することで中央揃えを実現します。すごい。ただし、ここでは内部要素の高さを決定する必要があり、モバイル端末に適したパーセンテージを使用できます。
方法 5: 翻訳
.box6 span{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; }これは実際には方法 3 の変換であり、移行は翻訳によって実現されます。
方法 6: display:inline-block
.box7{ text-align:center; font-size:0; } .box7 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box7:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }この方法は非常に賢いです...スペースを占有するために: after を使用します。 (学習ビデオ共有:
css ビデオ チュートリアル)
以上がCSSで垂直方向の中央揃えを行う方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。