画像をHTMLで見事に中央配置！驚くほど簡単な7つの方法

はじめに
画像をHTMLで中央に配置する方法について
方法1：インラインスタイルを使う
方法2：CSSを利用する
方法3：Flexboxを使用する
方法4：Gridを利用する
方法5：センタリングを行うタグを使用する
方法6：絶対位置指定を使う
方法7：マージンを活用する
まとめ

はじめに

この記事を読めば、HTMLで画像を中央配置することができるようになります。

画像をHTMLで中央に配置する方法について

画像をウェブページに配置する際、デザイン上の理由や見栄えの良さから、画像を中央に配置したいと思うことがあります。

しかし、初心者の方にとっては、どのようにすれば画像を中央に配置できるのか分からないかもしれません。

そこで、この記事では、HTMLで画像を中央に配置する方法を初心者向けに徹底解説します。

サンプルコードと応用例を交えて、わかりやすく説明していきます。

方法1：インラインスタイルを使う

インラインスタイルを使って、画像を中央に配置する方法です。

imgタグにstyle属性を追加し、CSSのtext-alignプロパティを用いて中央配置を行います。

<!DOCTYPE html>
<html>
<head>
<title>インラインスタイルで画像を中央配置</title>
</head>
<body>
<div style="text-align: center;">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

方法2：CSSを利用する

CSSファイルを作成し、imgタグに適用することで画像を中央に配置する方法です。

CSSファイルにtext-alignプロパティを指定し、中央配置を行います。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
<title>CSSを利用して画像を中央配置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="center">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

/* CSSファイル (style.css) */
.center {
  text-align: center;
}

方法3：Flexboxを使用する

CSSのFlexboxを使用して、画像を中央に配置する方法です。

親要素にdisplay: flex;、justify-content: center;、align-items: center;を指定し、子要素を中央に配置します。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
<title>Flexboxを使用して画像を中央配置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flexbox-center">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

/* CSSファイル (style.css) */
.flexbox-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法4：Gridを利用する

CSS Gridを使用して、画像を中央に配置する方法です。

親要素にdisplay: grid;を指定し、子要素にjustify-self: center;およびalign-self: center;を指定することで中央配置を行います。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
<title>Gridを利用して画像を中央配置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-center">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

/* CSSファイル (style.css) */
.grid-center {
  display: grid;
}

.grid-center img {
  justify-self: center;
  align-self: center;
}

方法5：センタリングを行うタグを使用する

古い方法ですが、centerタグを使用して、画像を中央に配置する方法もあります。

<!DOCTYPE html>
<html>
<head>
<title>センタリングタグを使用して画像を中央配置</title>
</head>
<body>
<center>
  <img src="image.jpg" alt="サンプル画像">
</center>
</body>
</html>

方法6：絶対位置指定を使う

CSSでpositionプロパティを使って、画像を中央に配置する方法です。

親要素にposition: relative;を指定し、子要素にposition: absolute;、top: 50%;、left: 50%;、transform: translate(-50%, -50%);を指定することで中央配置を行います。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
<title>絶対位置指定を使って画像を中央配置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="position-center">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

/* CSSファイル (style.css) */
.position-center {
  position: relative;
}

.position-center img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法7：マージンを活用する

CSSでマージンを使って、画像を中央に配置する方法です。

画像に対してmargin: auto;を指定することで、中央配置を行います。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html>
<head>
<title>マージンを活用して画像を中央配置</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="margin-center">
  <img src="image.jpg" alt="サンプル画像">
</div>
</body>
</html>

/* CSSファイル (style.css) */
.margin-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}