CSS div 垂直 centering_html/css_WEB-ITnose のまとめ

コードを書くときに、垂直方向のセンタリングの問題によく遭遇します。私は通常、絶対位置と負のマージンを使用してセンタリングを実現します。ただし、実際のプロジェクトでは、上記の方法があまり信頼できない特殊な状況が発生することがよくあります。したがって、より効果的な方法が特に重要です。

説明部分

この記事ではブラウザの互換性の問題については考慮していません。参考としていくつかの方法を提供するだけです。実際の開発時に実際の状況に応じて選択してください。特に現在人気のレスポンシブページでは、高さが固定されていないエフェクトの使用に適していない場合があります。容量には限りがあります。後でさらに方法を追加する場合は、お問い合わせください。

テキストの始まり

以下の説明を容易にするために、まず HTML を次のように統合します。

<div id="parent">    <div id="child">子div居中</div></div>

1. height

1.1 絶対配置と負のマージン:

このメソッドは絶対配置の div を使用し、その上部を 50% に設定し、margin-top を div の高さの負の半分に設定します。

#parent {    position: relative;    width: 600px;    height: 600px;    background-color: #ccc;}#child {    position: absolute;    top: 50%;    left: 50%;    height: 30%;    width: 50%;    margin: -15% 0 0 -25%;    background-color: #fff;}    

1.2 絶対位置決めと margin:auto:

このメソッドは、幅と高さが固定されたposition:absolute divを使用します。この div は、上:0、下:0 に設定されます。ただし、高さが固定されているため、実際には上下の間隔を 0 にすることはできず、margin:auto によって中央に配置されます。

#parent {    position: relative;    width: 600px;    height: 600px;    background-color:#ccc;}#child{    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;    width:100px;    height:100px;    background-color: #fff;}

1.3 Clear float:

このメソッドでは、子 div の外側に div が挿入されます。この div height:50% を子 div の高さに設定します。子 div は float から削除され、中央に表示されます。

上記の HTML を次のように変更します。

<div id="parent">    <div id="floater"></div>      <div id="child">子div居中</div></div>

css を次のように変更します。

#parent{     width: 600px;     height: 600px;    background-color: #ccc;}#floater {    float: left;    height: 50%;    margin-bottom: -50px;    background-color: #f00;}#child {    clear: both;    width: 100px;    height: 100px;    margin: 0 auto;    background-color: #fff;}

2. 子要素の高さが適応される場合

2.1 div の表示モードはテーブルに設定されます:

親 div の表示モードはテーブルに設定されているため、テーブルの垂直方向の配置を使用できます

#parent {    width:600px;     height:600px;    display: table;    background-color:#ccc;}#child {    display: table-cell;    vertical-align: middle;    background-color:#0f0;}

2.2 css3 変換のtranslate属性:

まず要素をコンテナの中心に配置し、次にtransformのtranslate属性を使用して要素の中心を親コンテナの中心と一致させます。

#parent {      position: relative;    width: 600px;    height:600px;    overflow: hidden;    background-color:#ccc;}#child{    position: absolute;    top: 50%;    background-color: #0f0;    transform: translateY(-50%);}

transform を使用する 欠点の 1 つは、計算結果に小数が含まれる場合 (0.5 など)、要素全体がぼやけて見えることです。解決策の 1 つは、transform-style:preserve- を設定することです。親要素の 3d; スタイル:

#parent{    -webkit-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transform-style: preserve-3d;}#child {      position: relative;      top: 50%;      transform: translateY(-50%);}

2.3 フレックスボックス

水平方向と垂直方向の中央揃えを実現するには、フレックスボックスを使用します。2 つの中央揃えプロパティを使用するだけです

#parent{     width:600px;    height:600px;    display: flex;    justify-content: center;    align-items: center;    background-color:#eee;}#child {    background-color: #0f0;}

フロントエンド初心者向けに知識を整理するため、誤りがあれば修正してください