CSS の垂直方向の中央揃えを実現するための 7 つのテクニックを共有します (コード付き)-CSSチュートリアル-php.cn

CSS の垂直方向の中央揃えを実現するための 7 つのテクニックを共有します (コード付き)

yulia

リリース： 2018-09-15 16:18:03

オリジナル

1745 人が閲覧しました

Web ページ上で CSS を垂直方向にセンタリングする需要はとどまるところを知らず、その難しさは決して簡単ではありません。各開発者が研究した結果、CSS の垂直方向センタリング手法は 10 種類近くあると言われていますが、まだ数は少ないです。一部の企業では、CSS の垂直方向のセンタリングのスキルが面接の質問として考慮されています。今日は、CSS の垂直方向のセンタリングのさまざまな方法について説明します。

1. 行の高さ

適用可能なシナリオ: 単一行テキストの垂直方向の中央揃え手法

この方法は最もよく知られています。単一行テキストで一般的です。テキストを適用する最も一般的な方法は、ボタンなどのオブジェクト、またはドロップダウンボックスやナビゲーションなどの要素です。この方法の原理は、単一行のテキストの行の高さを設定した後、テキストが行の高さの垂直方向の中央に配置されることです。この原理を使用すると、垂直方向の中央揃えの要件を簡単に達成できます。

<div class="content">Lorem ipsam.</div>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

ログイン後にコピー

2. 行の高さのインラインブロック

適用可能なシナリオ: 複数のオブジェクトの垂直方向の中央揃えテクニック

まず、この方法で行要素の垂直方向の中央揃えが実現できれば、もちろん複数行ができない理由はありません〜ただし、複数の要素または複数行の要素を1つの行要素として扱う必要があるため、ラップする必要がありますこのデータをもう 1 つのレイヤーに設定し、inline-block オブジェクトの外側のオブジェクトで inline-block を使用して高さの設定を置き換えます。これにより、垂直方向のセンタリングの目的を達成できます。データにはタイトルが含まれます。また、コンテンツも含めて通常通り縦方向に中央揃えにすることもできます。

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

ログイン後にコピー

3.:インラインブロックの前

適用可能なシナリオ:複数のオブジェクトに対する CSS 垂直方向の中央揃え手法

:疑似クラスの前element inline-block 属性を使用した書き込み方法は、非常に伝統的な垂直方向の中央揃え手法である必要があります。この方法の利点は、特別な高さを設定することなく子要素を中央揃えできることです。 :before 疑似クラスを使用します。要素を 100% high inline-block に設定し、次に中央揃えが必要な子要素を inline-block プロパティに設定すると、vertical-align:middle を使用して垂直中央揃えの目的を達成できます。これまでの優れた垂直方向のセンタリングソリューションでは、インラインブロック要素間の 4 ～ 5 ピクセルのスペースという小さな欠陥のみに特別に対処する必要がありましたが、非常に実用的でもありました。

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:&#39;&#39;;
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

ログイン後にコピー

4. 絶対マージンの負の値

適用可能なシナリオ: 複数行テキストの垂直方向の中央揃えスキル

絶対位置決めが必要だと誰が言ったでしょうか。使用量が少ない？ Amos は、使用量を減らしても増やしても問題はないと考えています。重要な点は、それを適切に使用するかどうかです。この例では、絶対配置でスペースの高さの 50% をキャプチャし、次にマージンを設定します。中心に配置された要素の上部をマイナスの半分に設定すると、要素が中心に配置されます。この方法は長年にわたって受け継がれてきた方法です。

<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

ログイン後にコピー

5. 絶対マージン自動

該当するシナリオ: 複数行テキストの垂直方向の中央揃え手法

もう 1 つの絶対的な垂直方向の中央揃えソリューション、このメソッドは少し特殊で、要素が絶対配置に設定されている場合、使用可能なスペース範囲全体をキャプチャできないと想定されるため、 margin:auto は失敗しますが、top:0;bottom:0; を設定すると、このとき、絶対配置された要素が使用可能なスペースを確保しました。この時点で、絶対配置された要素が親レイヤーの水平方向の中央に配置される必要がある場合は、left: 0 を設定することもできます。 ;right:0; を使用して、絶対位置の要素が使用可能なスペースを取得できるようにし、margin-left と margin-right を auto に設定して中央に配置します。ただし、この方法の欠点は、適切に中央に配置されるために、配置された要素の幅と高さが固定されている必要があることです (パーセンテージも考慮されます)。

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

ログイン後にコピー

6. 表示: テーブルセル

適用可能なシナリオ: 複数行テキストの垂直方向の中央揃えスキル

私はこのトリックだと思います。古い開発者なら見たことがあるはずですが、もちろん、私のような新しい開発者にとっては初めてです。このトリックの原理は、CSS の表示プロパティを使用して div をテーブルのセルに設定することです。情報を垂直方向に中央揃えにするためのストレージセルの配置をサポートするvertical-align 属性

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

ログイン後にコピー

7. パディング

該当するシナリオ: 複数行テキストの垂直方向の中央揃えヒント# ＃＃＃＃＃何！これも垂直センタリングの手法だと考えられていますね。はい、確かにこれは垂直センタリングの手法であることは否定できないので、開発者はそう考えています。この方法は垂直方向のセンタリング手法とは見なされませんが、私のデータが実際に垂直方向のセンタリングであるという事実には反論できません。

おっしゃるとおりです。

<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

ログイン後にコピー

要約: 上記では 7 つの CSS 垂直方向中央揃えテクニックを紹介しました。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

以上がCSS の垂直方向の中央揃えを実現するための 7 つのテクニックを共有します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。