How to center a div element?

Question

I am trying to center a div element on the page, but nothing seems to work. Currently the div grid structure "gallery" is pushed to the left like this, but I want to center it- does the flex property of its subelements have anything to do with it, and how can I best center it?

.album {
  margin: 0;
  overflow: hidden;
}

.image {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.image:nth-of-type(2n) {
  margin-right: 0;
}

.image:hover img {
  transform: scale(1.15);
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.gallery {
  margin-top: 1em;
  background-color: #86b3d1;
  display: flex;
  flex-wrap: wrap;
}

.main {
  background-color: #86b3d1;
}

<div class="main">
  <div class="title">
    <div class="inner-width">
      <div class="viewing">Viewing the Collection for</div>
      <div class="name">{{ place_name }}</div>
      <div class="address">at {{ address }}</div>
    </div>
  </div>
  <div class="gallery">
    {% for song, posts in posts_dict.items() %}
    <div class="album">
      <audio id="{{ song.song_uri[14:] }}" src="{{ song.song_preview }}"></audio>
      <img src="{{ song.album_picture }}" class="image" alt="" onmouseover="start('{{ song.song_uri[14:] }}')" onmouseout="stop('{{ song.song_uri[14:] }}')" onclick="playorpause('{{ song.song_uri[14:] }}')">
    </div>
    {% endfor %}
    <div class="album">
      <a href="{{ url_for('search_music', place_id=place_id, address=address) }}"><button class="add-button" >Add a song</button></a>
    </div>
  </div>
</div>

Answer 1

body{
display: flex;
align-items: center; 
margin: 0 auto;
width: 100%;
}

.gallery{
 width: 80%;
}

Answer 2

.gallery {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

For more clarification refer -> https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

Answer 3

Just add the following CSS:-

justify-content: center;

to your .gallery class to make it center aligned. Is this what you wanted?