CSS の水平方向のセンタリングと垂直方向のセンタリング_html/css

CSS の水平方向のセンタリングと垂直方向のセンタリング_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:58:26

オリジナル

1091 人が閲覧しました

水平方向の中央揃え:
インライン要素: text-align:center; 親を基準にして中央揃えで表示
ブロックレベルの要素: margin: 0 auto; ただし幅も同時に必要です、そうしないと効果が見えません
複数ブロックレベルの要素は中央に配置されます。ここでは、display:inline-block; と display:flex; について説明します。方法 1: 要素に set:display:inline-block を設定します。同時に、テキストを左に表示するために、ブラウザでの表示は子要素の高さが適応され、下が揃えられるように設定します。
方法 2: 子要素の高さが一定になるように、子要素に display:center;justify-content:center; を設定します。これは、最も多くのコンテンツを含む要素の高さと同じになります。
2 つの方法は Google、Firefox、および 360 と互換性がありますが、2 番目の方法は IE10 と互換性がありません。おそらく、以前の IE バージョンも互換性がありません。もちろん、フローティングによるレイヤーからの分離の問題や、親の背景色を追加できない問題にも対処しなければなりません。

 1 <main class="inline-block-center"> 2   <div> 3     I'm an element that is block-like with my siblings and we're centered in a row. 4   </div> 5   <div> 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 7   </div> 8   <div> 9     I'm an element that is block-like with my siblings and we're centered in a row.10   </div>11 </main>

ログイン後にコピー

 1 <main class="flex-center"> 2   <div> 3     I'm an element that is block-like with my siblings and we're centered in a row. 4   </div> 5   <div> 6     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. 7   </div> 8   <div> 9     I'm an element that is block-like with my siblings and we're centered in a row.10   </div>11 </main>

ログイン後にコピー

 1 body { 2   background: #f06d06; 3   font-size: 80%; 4 } 5 main { 6   background: white; 7   margin: 20px 0; 8   padding: 10px; 9 }10 main div {11   background: black;12   color: white;13   padding: 15px;14   max-width: 125px;15   margin: 5px;16 }17 .inline-block-center {18   text-align: center;19 }20 .inline-block-center div {21   display: inline-block;22   text-align: left;23 }24 .flex-center {25   display: flex;26   justify-content: center;27 }

ログイン後にコピー

垂直方向のセンタリング:

方法 1: padding-top と padding-bottom の値を等しく設定する

方法 2: 値を設定する高さの方法 3: 固定の高さを処理する方法があります:position:absolute;top:50%;height:100px;margin-top:-50px; 高さが固定されていない場合は、次の方法もあります。 jsを使用して動的に高さを取得します。
互換性の問題を考慮して記載されていない CSS3 のプロパティもいくつかあります。