CSS で画像を中央揃え
CSS で画像を div 内で垂直中央揃えする方法
CSS を使って、画像を div 内で垂直中央揃えにする方法について説明します。複数の方法がありますが、ここでは代表的な 3 つを紹介します。
方法 1: flexbox を使う
flexbox は、アイテムをコンテナ内で配置する強力な方法です。
div {
display: flex; /* div を flex コンテナにする */
align-items: center; /* アイテムを垂直中央揃え */
height: 200px; /* div の高さを指定 */
}
この方法では、div に display: flex; を設定し、align-items: center; で画像を垂直中央揃えにします。
方法 2: absolute positioning を使う
絶対位置付けを使って、画像を div 内で正確に配置できます。
div {
position: relative; /* div を相対位置付けにする */
height: 200px; /* div の高さを指定 */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 画像の中心を基準に移動 */
}
この方法では、div に position: relative; を設定し、画像に position: absolute; を設定します。その後、top と left プロパティを使って画像を中央に配置し、transform: translate(-50%, -50%); で画像の中心を基準に移動します。
方法 3: line-height を使う
line-height プロパティを使って、インライン要素を垂直中央揃えにすることができます。
div {
height: 200px; /* div の高さを指定 */
line-height: 200px; /* line-height を div の高さに合わせる */
text-align: center; /* 画像を水平中央揃え */
}
img {
vertical-align: middle; /* 画像を垂直中央揃え */
display: inline-block; /* インラインブロックにする */
}
この方法では、div の line-height を div の高さに合わせ、text-align: center; で画像を水平中央揃えにします。画像には vertical-align: middle; と display: inline-block; を設定します。
備考
- 画像のサイズや親要素のスタイルによっては、微調整が必要になる場合があります。
- どの方法も状況に応じて使い分けられます。
div {
display: flex;
align-items: center;
height: 200px;
}
height: 200px;: div の高さを指定します。この高さに合わせて画像が中央揃えされます。align-items: center;: flex アイテム (画像) を垂直方向に中央揃えします。display: flex;: div を flex コンテナにします。これにより、子要素 (画像) を flex アイテムとして扱うことができます。
div {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
transform: translate(-50%, -50%);: 画像の中心を基準にして、画像を -50%、-50% 移動させます。これにより、画像が完全に中央に配置されます。left: 50%;: 画像の左辺を div の中央に配置します。position: absolute;: 画像を絶対位置付けにします。これにより、画像を親要素 (div) 内で自由に配置できます。position: relative;: div に相対位置付けを設定します。これにより、子要素 (画像) の絶対位置付けの基準点になります。
div {
height: 200px;
line-height: 200px;
text-align: center;
}
img {
vertical-align: middle;
display: inline-block;
}
display: inline-block;: 画像をインラインブロック要素にします。これにより、vertical-align プロパティが有効になります。vertical-align: middle;: 画像を垂直方向に中央揃えします。text-align: center;: 画像を水平方向に中央揃えします。line-height: 200px;: div の行高さを div の高さに合わせます。これにより、インライン要素 (画像) を垂直中央揃えできます。height: 200px;: div の高さを指定します。
CSS Grid レイアウト
CSS Grid は、コンテナ内のアイテムを柔軟に配置できるレイアウトシステムです。
div {
display: grid;
place-items: center;
height: 200px;
}
display: grid;: div をグリッドコンテナにします。
table レイアウト
table レイアウトは、伝統的な方法ですが、依然として使用可能です。
div {
display: table;
height: 200px;
text-align: center;
}
img {
display: table-cell;
vertical-align: middle;
}
display: table-cell;: 画像をテーブルセルとして扱います。
margin: auto を使う (水平方向のみ)
margin: auto を使うと、ブロック要素を水平方向に中央揃えできますが、垂直方向には効果がありません。
img {
margin: 0 auto;
}
margin: 0 auto;: 画像の左右のマージンを自動調整し、水平方向に中央揃えします。
flexbox の justify-content プロパティ (水平方向のみ)
flexbox の justify-content プロパティは、flex アイテムを水平方向に配置します。
div {
display: flex;
justify-content: center;
}
absolute positioning と margin を組み合わせる
absolute positioning と margin を組み合わせると、より細かい制御が可能ですが、コードが複雑になる場合があります。
div {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto; /* 水平方向の微調整 */
}
- flexbox や grid レイアウトが一般的に推奨される方法です。
css image vertical-alignment
