後ほど: [フロント] CSS を垂直方向に中央揃えにする 7 つの方法 - karshey のブログ - CSDN ブログ
左右等間隔でセンタリング
フレックス
display: flex;justify-content: center;
<div class='parent'>
<div class="son">
</div>
</div>
.parent {
display: flex;
justify-content: center;
}
.son {
background: pink;
width: 100px;
height: 100px;
}
絶対位置決め＋マージン：自動
- 中央の子要素
- 息子と父親、子要素
margin:auto
原理：
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom +bottom = height 上記の式では、上と下は 0、マージンは次のようになります。 auto
, このとき、ブラウザはこの方程式を満たすために、マージンまでの上下の距離を均等に配分します。つまり、必要なセンタリング効果を実現します。水平方向の場合も同様です。
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: red;
}
<div class='father'>
<div class="center">
</div>
</div>
絶対位置決め＋マージン：マイナス値
原則: 現在の要素の位置を絶対位置に設定し、親要素を基準にして相対的に配置します。最初に left: 50%; top: 50% を設定し、現在の要素の左上隅が親要素の中心にくるようにします。次に、中心が親要素の中心になるように、負のマージン プロパティを適用します。したがって、子要素のサイズを知る必要があります。子要素の半分のサイズを移動します。
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
width: 200px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class='father'>
<div class="center">
</div>
</div>
垂直方向の中央に配置したい場合は、in center を追加する必要があります。
top: 50%;
margin-top: -50px;
位置決め+変形
- 親要素: 相対位置
- 子要素: 相対/絶対位置指定はOK
- 子要素
left:50%、親要素の中央までの左境界線 - 子要素
transform: translateX(-50%);。その中心が親要素の中心と揃うように、その半分を左に移動します。 - 子要素の幅を知る必要はありません
.father {
position: relative;
height: 500px;
width: 500px;
background-color: blue;
}
.center {
position: relative;
left: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translateX(-50%);
}
<div class='father'>
<div class="center">
</div>
</div>
テキスト整列: 中央;
要素テキストの水平方向の中央揃えを指定します。はインライン要素です。
text-align: center;
.parent {
text-align: center;
}
<div class='parent'>
<span>123</span>
</div>
マージン: 0 自動;
margin: 0 auto;- 幅が固定されている場合、幅が固定されていない場合、幅は
width:100% - ブロックレベルの要素
<div class='box'>是块级元素居中，块级元素内的不居中，想让这行文字也居中要用text-align</div>
.box {
background: skyblue;
width: 200px;
height: 200px;
margin: 0 auto;
}
マインドマッピング
CSS 水平方向のセンタリング (8 つのメソッド)、垂直方向のセンタリング (8 つのメソッド) - Nuggets (juejin.cn)