CSS でのさまざまなセンタリング方法について説明します。-CSSチュートリアル-php.cn

CSS でのさまざまなセンタリング方法について説明します。

高洛峰

リリース： 2016-12-12 14:36:13

オリジナル

1143 人が閲覧しました

今日は主にCSSにおける様々なセンタリング方法についてお話します。
最初に行うのは、水平方向に中央揃えにすることです。もちろん、最も簡単な方法は

margin:0 auto;

ログイン後にコピー

つまり、margin-left プロパティと margin-right プロパティを auto に設定して、水平方向の中央揃えの効果を実現します。

他の方法はどうですか？一つずつ説明しましょう:

line-height

ログイン後にコピー

まず、テキストの水平方向の中央揃え方法を紹介します:

<div class="wrap">刘放</div>

ログイン後にコピー

line-height を高さに設定して使用するだけです:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;
  
    height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

ログイン後にコピー

効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。

padding

パディングと背景クリップを使用して div の水平方向と垂直方向のセンタリングを実現します:

<div class="parent">
  <div class="children"></div>
</div>

ログイン後にコピー

backgroun-clip をコンテンツボックスに設定し、背景をコンテンツ領域の外側の端までトリミングし、パディングを使用してコンテンツ領域の差を設定します。外側の div と内側の div の半分を実現します:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

ログイン後にコピー

効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。

余白を埋める

次に、水平方向と垂直方向の中央揃えを実現するための余白を埋める方法を紹介します。
まず、親子 div を定義します:

ここでは、 child div margin-top は、親 div の高さから子 div の高さの半分を引いた値に設定され、その後、オーバーフローが親 div の BFC をトリガーするために非表示に設定されます。 LESS コードは次のとおりです。

最終的なセンタリング効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。

absolute Positioning

上、左50%でposition:absoluteを使用し、マージンを負の値に設定して、divを水平方向と垂直方向に中央に配置します。親子 div を定義する必要があります:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

ログイン後にコピー

次に、対応する CSS を設定します:

<div class="parent">
  <div class="children"></div>
</div>

ログイン後にコピー

ここで、margin の値は div の幅の半分です。最終的なレンダリングは次のようになります:

CSS でのさまざまなセンタリング方法について説明します。

text-aligncentered

ご存知のとおり、text-align は div 内のコンテンツを水平方向に中央揃えにすることができます。しかし、子 div をこの div の中央に配置したい場合はどうすればよいでしょうか?子 div の表示を inline-block に設定できます。

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

ログイン後にコピー

画像の中央揃え

一般的な画像の中央揃えは、画像を div で囲み、div の text-align を中央に設定することと同じです。

以下のリンクを参照してください:
個人サイト

画像をプレースホルダーとして使用して、親コンテナが高さと幅を取得できるようにする特別な方法があります。これにより、-50% オフセットの画像がパーセント計算。利点は、画像のサイズがわからないため、親コンテナのサイズを超えない任意の画像を配置でき、中央に配置されることです。また、互換性も良くIE6にもスムーズに対応しています。コードは次のとおりです:

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

ログイン後にコピー

<div class="parent">
  <p>
    <img class="hidden-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
    <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" /></p>
</div>

ログイン後にコピー

効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。

transformcentered

上記の中央揃えの div の例では、div の幅は固定されていますが、実際のプロジェクトでは div が発生する可能性があります。特にレスポンシブなデザインやモバイル側のデザインでは、より一般的です。そこで、固定幅を必要とせずに div を水平方向と垂直方向に中央揃えする方法を紹介します。

最初にコードに移動します:

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

ログイン後にコピー

<div class="parent">
  <div class="children">
    <div class="children-inline">我是水平垂直居中噢！</div>
  </div>
</div>

ログイン後にコピー

効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。

まず、floatを使用して、中央に配置する必要があるdivの親div、つまり子divの幅を縮小し、次に左に配置します。 :50%、子の左側を水平正中線に揃えます。この時点では、まだ実際には中央に配置されていません。水平方向に中央に配置されるように、children-inner を左に -50% 移動する必要があります。

まず垂直方向について説明します。まず、子の上部を 50% に設定し、その上端を垂直の中心線に合わせます。同様に、子の内部を上に -50% 移動する必要があります。ただし、この 50% は計算できないため、translate3d(0, -50%, 0); を使用します。このメソッドは非常に使いやすいです。

flex centering

最後に、CSS3のdisplay:flexで実装される水平方向と垂直方向のセンタリング方法を紹介します。

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

ログイン後にコピー

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

ログイン後にコピー

効果は次のとおりです:

CSS でのさまざまなセンタリング方法について説明します。この方法は最も簡単ですが、互換性は良くありませんが、時間が経つにつれて、すべての主要なブラウザが互換性を持つようになります。

上記は CSS のさまざまなセンタリング方法についての全体的な説明です。気に入っていただければ幸いです。