超簡単！CSSでdivを水平方向に中央に配置する3つのステップ
2024-04-02
CSSを使ってdivを水平方向に簡単に中央に配置する方法
方法1: marginプロパティを使用する
これは最もシンプルでよく使われる方法です。div要素のmarginプロパティにautoを指定します。
<div style="margin: 0 auto;">
ここにコンテンツ
</div>
text-alignプロパティは、テキストだけでなく、ブロック要素も水平方向に中央揃えできます。ただし、この方法は、div要素内にテキストのみが含まれている場合にのみ有効です。
<div style="text-align: center;">
ここにテキスト
</div>
方法3: flexboxを使用する
flexboxは、要素を柔軟にレイアウトするためのCSSレイアウトシステムです。div要素にdisplay: flex;を指定し、justify-content: center;を指定することで、水平方向に中央揃えできます。
<div style="display: flex; justify-content: center;">
ここにコンテンツ
</div>
方法4: gridを使用する
<div style="display: grid; place-items: center;">
ここにコンテンツ
</div>
- シンプルなレイアウトの場合は、方法1または方法2を使うのがおすすめです。
補足
- 上記の例では、
style属性を使用してCSSを直接指定しています。スタイルシートファイルを使用したい場合は、class属性またはid属性を使用してスタイルを適用できます。 - 上記の方法は、
div要素だけでなく、他のブロック要素にも適用できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div style="margin: 0 auto; width: 300px; height: 200px; background-color: #ccc;">
ここにコンテンツ
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div style="text-align: center; width: 300px; height: 200px; background-color: #ccc;">
<h1>ここにテキスト</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div style="display: flex; justify-content: center; width: 300px; height: 200px; background-color: #ccc;">
<img src="image.jpg" alt="画像" width="100px">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div style="display: grid; place-items: center; width: 300px; height: 200px; background-color: #ccc;">
<button>ボタン</button>
</div>
</body>
</html>
これらのコードを参考に、
その他の div 要素を水平方向に中央に配置する方法
方法5: CSS position プロパティを使用する
position プロパティを使用して、div 要素を相対的にまたは絶対的に配置できます。
<div style="position: absolute; left: 50%; transform: translateX(-50%);">
ここにコンテンツ
</div>
方法6: CSS margin-left と margin-right プロパティを使用する
margin-left と margin-right プロパティを使用して、左右のマージンを個別に設定できます。
<div style="margin-left: auto; margin-right: auto;">
ここにコンテンツ
</div>
方法7: CSS display プロパティと float プロパティを使用する
display プロパティを inline-block に設定し、float プロパティを left または right に設定できます。
<div style="display: inline-block; float: left;">
ここにコンテンツ
</div>
方法8: CSS flexbox と align-items プロパティを使用する
flexbox を使用して、div 要素を垂直方向に中央に配置することもできます。
<div style="display: flex; justify-content: center; align-items: center;">
ここにコンテンツ
</div>
方法9: CSS grid と place-content プロパティを使用する
<div style="display: grid; place-content: center;">
ここにコンテンツ
</div>
css html
