CSS を使用して絶対 Div を中央に配置する
- CSS を使用して要素を中央に配置する
-
absoluteプロパティを使用して要素を水平方向に中央揃え -
absoluteプロパティを使用して要素を垂直方向に中央揃えにする -
absoluteプロパティを使用して要素を水平方向と垂直方向の両方で中央揃えにする - まとめ
CSS (カスケーディング スタイル シート) は、HTML 要素のスタイルを定義し、さまざまなデバイスや画面サイズに適応して表示する方法を定義するために使用されます。 CSS を使用すると、複数のページのレイアウトを一度に制御できるため、多くの作業を節約できます。
absolute プロパティを使用して、div クラス内で要素を中央揃えにする方法を見てみましょう。
CSS を使用して要素を中央に配置する
テキスト、画像、ボックス、または要素のグループを中央に配置する場合は、それらを垂直および水平に配置する必要があります。 センタリングは水平方向と垂直方向の配置で簡単に見えますが、従わなければならない手順はいくぶんトリッキーです。
text-align: center; を使用できます インラインと margin: 0 auto; を使用 ブロック要素を使用して、要素を水平方向に中央揃えにします。 CSS で absolute プロパティを使用して、1つの要素または要素のグループを垂直方向、水平方向、または垂直方向と水平方向の中央に配置することもできます。
absolute プロパティを使用する
要素が存在する位置を指定しない限り、それらはデフォルトで静的のままです。 top、left、right、および bottom プロパティは、これでは機能しません。
そのため、静的な HTML 要素は配置されておらず、マークアップ言語のように表示されます。 しかし、absolute プロパティを使用すると、要素が配置され、存在しないかのように動作します。
absolute 配置要素のスペースはそこから取り除かれ、別の要素に割り当てられますが、absolute 配置要素はそれ自体でスペースを占有します。
HTML コードが次のようになっているとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Center an Absolute div</title>
</head>
<body>
<div class="container">
<div class="green-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
上記のコード スニペットのように、ドキュメント タイプは html であり、冒頭で <html> と <head> の両方が開かれていることが示されています。 その後、さまざまな文字へのアクセスを可能にするメタ文字セットを定義します。
次に、style という名前の CSS ファイルが href を使用して現在の HTML ファイルにリンクされ、<title> 内にタイトル Center an Absolute div が表示されます。 次に、<head> を閉じた後、<body> を 1 回開く必要があります。
<body> では、container という名前の div クラス が開かれ、さらに 2つの green-box と blue-box が作成されます。 最後の部分では、<div>、<body>、および <html> タグが終了シーケンスです。
style.css コード:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
}
.orange-box,.purple-box {
width: 100px;
height: 100px;
}
.orange-box {
background-color: orange;
}
.purple-box {
background-color: purple;
}
上記のコード スニペットは、style.css 内のコードです。
最初に、定義済みのプロパティを持つ緑色の枠付きコンテナーを作成しました。 次に、幅と高さが 100px のオレンジと紫の 2つのボックスを作成しました。
出力：
style.css ファイルのボックス内のプロパティをカスタマイズして、それらを水平方向、垂直方向、または水平方向と垂直方向の両方で中央揃えにすることができます。
明確なアイデアを得るために、紫色のボックスのみをカスタマイズしてみましょう。 要素を中央に配置するために、以下で説明するユース ケースごとに上記のコードを変更できます。
absolute プロパティを使用して要素を水平方向に中央揃え
コード例:
.purple-box {
background-color: purple;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
出力：
上記のスニペットによると、absolute プロパティを使用して紫色のボックスを配置しましたが、left と right の値は 0 です。また、top と bottom のマージンは 0 ですが、両方とも left と right の余白は auto です。
そのため、オブジェクトの幅に対して自動マージンがかかります。
出力でわかるように、紫色のボックスは absolute 位置プロパティを使用して水平方向に中央揃えされています。
absolute プロパティを使用して要素を垂直方向に中央揃えにする
コード例:
.purple-box {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
出力：
上記のコード スニペットでは、位置に absolute プロパティを使用し、top と bottom の値を 0 に設定して、紫色のボックスを垂直方向に中央揃えに設定しました。また、margin 値 を設定します。topとbottom の両方が auto で、left と right のマージン値は 0 です。
上記のコードのように紫色のボックスをカスタマイズした後、上記の出力に示されている absolute プロパティを使用して垂直方向の中央に配置できます。
absolute プロパティを使用して要素を水平方向と垂直方向の両方で中央揃えにする
コード例:
.purple-box {
background-color: purple;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
出力：
このメソッドは、上記のメソッドのコレクションです。 紫色のボックスを水平方向と垂直方向の中央に配置するために、位置を absolute に設定した後、right、left、top、bottom の値を 0 に設定しました。
次に、top、bottom、left、および right の margin 値として auto を割り当てました。
上記の方法を適用して、紫色のボックスをページに対して垂直方向および水平方向の中央に配置できます。 しかし、ここではコンテナを使用しています。
緑色の枠のコンテナに合わせて紫色のボックスを中央に配置したい場合は、以下のようにコンテナのプロパティ内で relative 位置を定義する必要があります。
コード例:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
position: relative;
}
出力：
上記の 3つのインスタンスは、要素をセンタリングする際の主要な 3つのインスタンスであり、各例で紫色のボックスの幅を定義しています。
それとは別に、幅が不明な場合は、相対スケールで transform メソッドを使用できます。これを使用すると、幅の値を指定するよりも、応答性と柔軟性が高くなります。
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
transform: translate(0, -50%);
この方法では、translate 関数の左の目盛りが x 軸に対応し、もう一方の目盛りが y 軸に対応します。 スケールによると、要素はレスポンシブです。
まとめ
absolute プロパティを使用して、ブロックのサイズを変更し、パーセンテージに従って応答性を高めることができます。 この記事全体を通して、要素を水平方向、垂直方向、および水平方向と垂直方向の中央に配置する方法について、例を挙げて説明してきました。
静的要素ではなく、absolute 配置要素は、それらを宣言したコンテナーを尊重しません。 しかし、相対的に配置された要素では、absolute 配置された要素は margin と top、bottom、left、および right プロパティを持つ境界を持ちます。
幅が定義されていない場合、transform メソッドは柔軟性と応答性を向上させます。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.