`<div>`中央揃えCSS解説
2024-08-23
HTMLとCSSで<div>を水平・垂直に中央揃えする方法
HTML
まず、<div>要素を作成し、その要素にID属性を付与します。これはCSSでスタイルを適用するために必要です。
<div id="centered-div">
</div>
CSS
次に、CSSファイルまたはスタイルブロックで、IDセレクタを使用して<div>要素のスタイルを定義します。
#centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解説
- position: absolute
このプロパティにより、要素がドキュメントフローから外れ、親要素に対して相対的に位置づけられます。 - top: 50%
要素の上辺を親要素の垂直方向の中央に配置します。 - transform: translate(-50%, -50%)
このプロパティにより、要素をその自身の幅と高さの半分だけ左と上に移動します。これにより、要素の中心が親要素の中心に正確に配置されます。
- margin: 0 auto
ブロックレベル要素を水平方向に中央揃えする一般的な方法です。ただし、この方法では垂直方向の中央揃えはできません。 - position: relative
親要素に対して相対的に位置づけたい場合に使用します。
<div>中央揃えCSS解説とコード例
<div>要素を水平・垂直に中央揃えする方法
<div id="centered-div">
中央揃えするコンテンツ
</div>
#centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
コード例
<!DOCTYPE html>
<html>
<head>
<title>Centered Div</title>
<style>
#centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="centered-div">
This content is centered both horizontally and vertically.
</div>
</body>
</html>
<div>中央揃えの代替方法
Flexboxを使用する
Flexboxは、要素を柔軟にレイアウトするための強力なCSSモジュールです。<div>を水平・垂直に中央揃えするには、親要素にdisplay: flexを設定し、子要素にjustify-content: centerとalign-items: centerを適用します。
.container {
display: flex;
justify-content: center;
align-items: center;
}
.centered-div {
/* 他のスタイル */
}
Gridレイアウトを使用する
Gridレイアウトは、要素をグリッド形式で配置するためのCSSモジュールです。<div>を中央揃えするには、親要素にdisplay: gridを設定し、place-content: centerを適用します。
.container {
display: grid;
place-content: center;
}
.centered-div {
/* 他のスタイル */
}
margin: 0 autoを使用する
ブロックレベル要素を水平方向に中央揃えする一般的な方法です。ただし、垂直方向の中央揃えはできません。
.centered-div {
margin: 0 auto;
}
text-align: centerを使用する
インライン要素を水平方向に中央揃えする一般的な方法です。ただし、ブロックレベル要素には適用できません。
.centered-div {
text-align: center;
}
html css alignment
