水平方向と垂直方向のセンタリングを同時に実現する CSS の 5 つのアイデア_html/css

× 目次 [1] 水平方向の配置 + 行の高さ [2] 水平方向 + 垂直方向の配置 [3] マージン + 垂直方向の配置 [4] 絶対値 [5] フレックス

前述の通り

水平方向のセンタリングと垂直方向のセンタリングは個別に紹介しましたが、この記事では、水平方向と垂直方向の中央揃えを同時に行うための 5 つのアイデアを紹介します

アイデア 1: text-align + line-height を使用して、単一行テキストの水平方向と垂直方向の中央揃えを実現します

<style>.test{    text-align: center;    line-height: 100px;}</style>

ログイン後にコピー

<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>

ログイン後にコピー

案2: text-align +vertical-align

【1】親要素にtext-alignとvertical-alignを設定し、親要素をtable-cell要素に設定し、子要素を設定する要素を inline-block 要素に変換します

[注意] IE7-browse Converter と互換性がある場合は、構造を

構造に変更して、display:inline;zoom:1; を使用します。 inline-block の

<style>.parent{    display: table-cell;    text-align: center;    vertical-align: middle;}.child{    display: inline-block;}</style>

ログイン後にコピー

<div class="parent" style="background-color: gray; width:200px; height:100px;">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

【2】子要素が画像である場合、代わりに、親要素は高さの代わりに行の高さとフォントサイズを使用します。は 0 に設定されます。子要素自体にvertical-alignを設定します: middle

<style>.parent{    text-align: center;    line-height: 100px;    font-size: 0;}.child{    vertical-align: middle;}</style>

ログイン後にコピー

<div class="parent" style="background-color: gray; width:200px; ">  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"></div>

ログイン後にコピー

3つのアイデア: margin +vertical-align

親要素にvertical-alignを設定するには、テーブルに設定する必要があります-cell 要素; margin:0 auto で水平方向に中央揃えのブロック要素コンテンツの幅を拡張したい場合は、テーブル要素に設定する必要があります。 table 要素は、セル内に table を入れ子にするのと同じように、tabel-cell 要素内に入れ子にすることができます

[注] IE7 ブラウザに対応している場合は、構造を

構造に変更する必要があります。

<style>.parent{    display:table-cell;    vertical-align: middle;}.child{    display: table;    margin: 0 auto;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

アイデア4：absolute

を使う

【1】絶対配置要素のボックスモデル機能を利用し、オフセットを元にmargin:auto

<style>.parent{    position: relative;}.child{    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    height: 50px;    width: 80px;    margin: auto;}</style>

ログイン後にコピー

を設定する

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

に帰属します特定の値

【2】絶対配置要素の offset 属性と、translate() 関数の self offset を使用して、水平方向と垂直方向のセンタリングの効果を実現します

[注意] IE9 ブラウザは

をサポートしていません

<style>.parent{    position: relative;}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

[3] 子要素の幅と高さがわかっている場合、負のマージン値を使用して水平方向と垂直方向のセンタリング効果を実現できます

<style>.parent{    position: relative;}.child{    position: absolute;    top: 50%;    left: 50%;    width: 80px;    height: 60px;    margin-left: -40px;    margin-top: -30px;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

アイデア5: flex

を使う

【注意】IE9-Browse コンテナは

をサポートしていません

【1】margin:auto

を使う

<style>.parent{    display: flex;}.child{    margin: auto;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー

【2】主軸揃えのjustify-contentを使う交差軸の配置フレックスコンテナ上の項目を配置します

<style>.parent{    display: flex;    justify-content: center;    align-items: center;}</style>

ログイン後にコピー

<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">  <div class="child" style="background-color: lightblue;">测试文字</div></div>

ログイン後にコピー