HTML の水平方向の中央揃えと垂直方向の中央揃えの問題。 (固定高さと可変高さ)_html/css_WEB-ITnose

レイアウトのプロセス中に、特定の要素を中央に配置する必要がある場合は、

margin: 0 auto と text-align: center を使用するだけで問題ないと思います。

次にお話したいのは、全体のセンタリング (水平センタリングと垂直センタリング) についてです。

ここで、最初に絶対位置決めを使用していることをお伝えします。

これから直接ボックスを作成します。観察は次のとおりです。以下の通りです

ここで、外枠と内枠はそれぞれ辺の長さが300pxと100pxの正方形です。

内側のフレームを中央に配置する必要があります。 (この時、内枠の高さが固定されます)

1 高さが固定された場合。

通常、次のようにコードを操作します。

Position:Absolute;

top: 50%;

left: 50%;

left: 50%;内側のフレームが中心にないことがわかります。これは、内側のフレームが線ではなく形状であることを無視しているためです。

この問題を解決するには、マージンの負の値を使用して全体を再度移動する必要があります。移動の値は境界線の長さの半分です。

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

位置: 絶対;

上: 50% マージン-上: -50px;

効果は次のとおりです。

負の値の利用 ラベルを親要素の近くに配置すると、中央揃えの効果を得ることができます。

2 高さが不明な場合

。

実際、この 2 つの原理は同じですが、高さが不規則な場合、高さの半分を選択することはできないため、コードの一部を変更するだけで済みます。 50%;

left: 50 % ；

transform: translation(-50%, -50%); これでセンタリング効果も完成です。

皆さんも行ってみてください。

りー