記事はYoudaoCloud Notesからcsdnブログに転送されます。画像の損失の問題がある場合は、元のテキストを読むことができます。
センタリングレイアウトはCSSの非常に苦痛な古い問題です。始めたばかりの人はとてもイライラしていると思います。インターネット上にはセンタリングレイアウトに関する記事もたくさんあります。シナリオが異なるため、すべての人に適した方法を選択するのは難しいかもしれません。
今日の要約はスコアによってランク付けされ、合計スコアは5ポイントです
フレックスフレキシブルボックス方式
スコア：5ポイント
フレックスを最初に置く理由は、水平方向または垂直方向の中央、単線、複数線、高さ不明など、これらの問題を解決するためにフレックスをうまく適合させることができ、その適用性が最も強いです。
フレックスレイアウトを使用してセンタリングを実現する場合、焦点はjustify-contentとalign-itemsの2つのプロパティにあります。
中央に配置された単一行
HTML
<div class="container">
<div class="item">广州</div>
</div>
CSS
.container{
width: 200px;
height: 100px;
background-color: aqua;
display: flex;
<!--水平居中-->
justify-content: center
<!--垂直居中-->
align-items: center;
}
.item{
<!--文本居中-->
text-align: center;
background-color: red;
}
複数の行を中央に配置
HTML
<div class="container">
<div class="item">广州</div>
<div class="item">深圳</div>
<div class="item">北京</div>
</div>
CSS
.container{
width: 200px;
height: 100px;
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
複数の列を中央に配置
HTML
<div class="container">
<div class="item">广州</div>
<div class="item">深圳</div>
<div class="item">北京</div>
</div>
CSS
.container{
width: 200px;
height: 100px;
background-color: aqua;
display: flex;
flex-wrap: row wrap;
<!--水平等比平分-->
justify-content: space-evenly;
<!--垂直居中-->
align-items: center;
}
.item{
background-color: red;
text-align: center;
}
位置+変換方法
スコア：4ポイント
利点：位置+変換方法は、子要素の幅と高さが不明な場合のセンタリングの問題を解決でき、幅と高さがわかっている場合にも適しています。水平方向と垂直方向のセンタリングを満たすことができます。
短所：サブ要素は絶対位置を使用するため、ドキュメントフローから切り離され、すべてのサブ要素がオーバーラップします。特別な注意が必要であり、複数の線を中央に配置することはできません。
親要素で相対配置を使用し、子要素で絶対配置を使用します。同時に、leftとtopを使用して子要素を親要素から50％オフセットし、次にtransformを使用して子要素を左に作成します。上に移動50％移動し、最終的にセンタリング効果を実現します。
HTML
<div class="container">
<div class="child">广州</div>
</div>
CSS
.container{
width: 50%;
height: 30%;
background-color: aqua;
position: relative;
}
.child{
background-color: red;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
マージン
スコア：3点
マージンを使用：0 autoは水平方向にのみ中央揃えできますが、前提条件は子要素の幅を知っていることであり、垂直方向の中央揃えとは関係ありません。ブロックレベルの子要素でのみ機能します。
HTML
<div class="container">
<div class="child">广州</div>
</div>
CSS
.child{
<!--必须设置子元素的宽度-->
width: 50%;
background-color: red;
text-align: center;
<!--在子元素上设置-->
margin: 0 auto;
}
text-align
スコア：2ポイント
Text-alignは、インライン要素の中心にのみ作用し、ブロックレベルの要素には影響しません。通常、text-alignはブロックレベルの要素に設定され、インライン要素をブロックレベルの要素内の中央に配置します。
HTML
<div class="container">
<span>广州</span>
</div>
CSS
.container{
width: 200px;
background-color: aqua;
text-align: center;
padding: 10px;
}
総括する
インターネットのセンタリングスキームについては多くの詳細があります。スキームが多すぎるため、選択が難しい場合があります。どちらが適しているかわかりません。上記の4つのセンタリングスキームは、一般的なシナリオの80％以上に適しており、開発には十分だと思います。
- フレックスレイアウト
- 位置+変換
- マージン：0自動
- text-align
フレックスレイアウトと位置+変換には、親要素の幅と高さ、および子要素のタイプ（ブロックレベル、インライン）に関する特別な要件はありません。最初に選択することをお勧めします。
親要素がブロックレベルの要素であり、子要素がインライン要素（テキストラベル、ハイパーリンクなど）である場合は、テキストを中央に揃えることを選択できます。Felxレイアウトがある場合、それは少しやり過ぎです。
パディングとマージンのプロパティを適切に使用することで、センタリング効果を実現できる場合もあります。