cssで画像を中央に寄せる方法

画像を中央に配置する方法

画像を中央に配置する方法を説明します。

画像を中央に配置する方法は複数あります。

   <div class="wrapper">
      <figure class="photo"><img src="画像のファイル"></figure>
    </div>

一つ目はフレックスボックスでセンターにします。

.wrapper{
     display: flex;
   justify-content: center;
  }

２つ目はグリットレイアウトでセンターにします。

.wrapper{
 display: grid;
  place-items: center;
}

３つ目はmarginで真ん中寄せにします。

.photo{
  width: 200px;
  margin: 0 auto;

}

.画像が中央に配置されました。

画像を中央に配置するにはフレックスボックス、グリットレイアウト、marginを使う方法があります。