gridで並べた画像を上下左右中央にしたい

前提・実現したいこと

HTML・CSS初心者です
質問の仕方もどうしたらよいのか分かっておらず不安なのですが
自分なりに調べましたが解決できずにいるので助言いただければ幸いです

9枚ある画像をタイル状に並べたくて、gridで並べたはいいのですが、どうしても上下左右中央にできません

なんとか左右中央には寄っても、上はヘッダーにくっついてしまいます
margin-topで、見た目には上下中央にできるのですが
できれば余白調節は使いたくありません

また、レスポンシブ対応にした際には、横3列は綺麗に並ぶのですが
縦の列と列の間に大きくスペースができてしまい、これも困っています

上下左右中央に画像を一塊で表示するにはどうすればよいでしょうか

作業環境
Windows10pro　64bit
使用エディター　Atom
PCブラウザ　chromeバージョン: 89.0.4389.114（Official Build）（64 ビット）
スマートフォン　iphon8　iOS 14.4.2
ブラウザ　Safari

不足事項があれば追記します

該当のソースコード

<html lang="ja">
 <head>
    <meta charset="utf-8">
    <title>HASAMI</title>
    <meta name="description" content="創作イラストサイト">
    <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
    <link rel="icon" type="icon/favicon.png" href="icon/favicon.png">
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

    <!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="topstyle.css">
  </head>

  <body>
    <header>
      <img class="titlelogo" src="logo/titlelogo1.png">
    </header>

    <main>
      <div class="item">
        <a href=""><img src="homeicon/1maru.png" onmouseover="this.src='icon/abouticon.png'" onmouseout="this.src='homeicon/1maru.png'"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/2maru.png"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/3maru.png"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/4maru.png"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/5maru.png" onmouseover="this.src='icon/hasamicon.png'" onmouseout="this.src='homeicon/5maru.png'"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/6maru.png" onmouseover="this.src='icon/galleryicon.png'" onmouseout="this.src='homeicon/6maru.png'"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/7maru.png"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/8maru.png"></a></li>
      </div>
      <div class="item">
        <a href=""><img src="homeicon/9maru.png" onmouseover="this.src='icon/mailicon.png'" onmouseout="this.src='homeicon/9maru.png'"></a></li>
      </div>
    </main>

    <footer>
      2021.03.30
    </footer>
    </div>
  </body>
ソースコード


html{
  font-size: 100%;
}

body{
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  font-family: 'Sawarabi Gothic', sans-serif;
  line-height: 1.7;
  background-color: #;
}

img{
  max-width: 100%;
  height: auto;
}

header{
  text-align: center;
  background-color: #aaa;
  padding: 30px;
}

.titlelogo{
  width: 18%;

}

main{
 flex: 1;
 display: grid;
 align-items: center;
 justify-content: center;
 grid-template-columns: repeat(3, 200px);
 background-color: #bbb;
 }

footer{
 text-align: center;
 background-color: #d6d6d6;
}

@media (max-width: 600px;){

}

コード

行動規範の内容に同意します

回答1件

ベストアンサー

htmlの変更が可能なら、

html
1    <header>
2    </header>
3    <div class="wrapper">
4        <main>
5
6        </main>
7    </div>
8    <footer>
9    </footer>
10    </div>
11</body>

mainを囲むブロックを追加して、それにflexを設定してmainを上下左右中央寄せすればどうでしょう。

css
1.wrapper {
2 flex: 1;
3 display: flex;
4 align-items: center;
5 justify-content: center;
6 background-color: #bbb;
7}
8
9main{
10 display: grid;
11 grid-template-columns: repeat(3, 200px);
12 }