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

今日は主に css におけるさまざまなセンタリング方法について説明します。
1 つ目は水平方向に中央揃えです。もちろん最も簡単な方法は

です。

コードをコピー コードは次のとおりです:

margin:0 auto;

p>

つまり、水平方向のセンタリング効果を実現するには、margin-left プロパティと margin-right プロパティを auto に設定します。

他の方法はどうでしょうか? 1 つずつ見ていきましょう。

行の高さ

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

コードをコピー コードは次のとおりです。

liu fang

行の高さを高さと同じになるように使用します:

コードをコピー コードは次のとおりです:

.wrap{
line-height: 200px;/*垂直センターキー*/
text-align:center;

高さ: 200px;
フォントサイズ: 36px;
背景色: #ccc;
}

効果は次のとおりです。

パディング

パディングと背景クリップを使用して、div の水平方向と垂直方向の中央揃えを実現します。

コードをコピー コードは次のとおりです。

backgroun-clip を content-box に設定することで、コンテンツ領域の外側の端まで背景をトリミングし、パディングを使用して外側の 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;/*居中的关键*/

効果は次のとおりです。

余白を埋める

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

ここでは、子 div の margin-top を親 div の高さから子 div の高さの半分を引いた値に設定し、オーバーフローを非表示に設定して親 div の bfc をトリガーします。less コードは次のとおりです。次のように:

@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;
}

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

絶対位置

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

コードをコピー コードは次のとおりです。

次に、対応する css を設定します。

.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 の幅の半分です。最終的なレンダリングは次のようになります。

テキストを中央揃え

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

.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生效*/
}

画像を中央に配置する

一般に、画像の中央揃えは text-align と同じです。画像は div にパッケージ化され、div の text-align は center に設定されます。
以下のリンクを参照してください。
個人サイト

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

コードをコピー コードは次のとおりです。

http://nec.netease.com/img/s/1 .jpg" alt="" />
http://nec.netease.com/img/s/1 .jpg" alt="" />

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

コードをコピー コードは次のとおりです。

水平方向と垂直方向の中央揃えになりました。

.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;
}

効果は次のとおりです。

まず、float を使用して、中央に配置する必要がある div の親 div (つまり子) の幅を縮小し、次に left:50% を使用して、子の左側を水平の中線に揃えます。この時点ではまだ中央に配置されていないため、children-inner を左に -50% 移動して水平方向に中央に配置する必要があります。
垂直方向について話しましょう。まず子の上部を 50% に設定し、次にその上端を垂直の中心線に合わせます。同様に、子の内部を上に -50% 移動する必要があります。ただし、この 50% は計算できないため、translate3d(0, -50%, 0); を使用します。
この方法はとても使いやすいです。

フレックス中心

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

コードをコピー コードは次のとおりです。

flex を使用して水平方向と垂直方向の中央に配置します。

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

効果は次のとおりです。

この方法は最も簡単ですが、互換性はあまり良くありませんが、時間が経つにつれて、すべての主要なブラウザが互換性を持つようになるでしょう。

上記がこの記事の全内容です。皆さんに気に入っていただければ幸いです。