Center the grid image

Question

I am using the existing template and try to change the display of the home page. The original setting of the image grid is 2*4, and I am trying to change it into 2*3 grid. But I don't know how to make the images display in the center

Here is my html and css:

Html:

<div class="gallery">
   <div class="content">

        <div class="media">     
         <a href="images/fulls/01.jpg" class = "class_outer">
         <img src="images/home/01.jpg" alt=""  title="ICC profile）" />
         <span style="text-align:center" class="class_cover">text</span>
         </a>   
        </div>

        <div class="media">     
         <a href="images/fulls/02.jpg" class = "class_outer">
         <img src="images/home/01.jpg" alt=""  title="ICC profile）" />
         <span style="text-align:center" class="class_cover">text</span>
         </a>   
      </div>

   </div>
</div>

CSS:

.media {
    float:left;
    position: relative;
    width: 33%;
    margin:1.66% ;

}
.gallery .content {
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -moz-justify-content: -moz-flex-start;
        -webkit-justify-content: -webkit-flex-start;
        -ms-justify-content: -ms-flex-start;
        justify-content: flex-start;
    }

.gallery .content .media {
            -moz-animation: gallery 0.75s ease-out 0.4s forwards;
            -webkit-animation: gallery 0.75s ease-out 0.4s forwards;
            -ms-animation: gallery 0.75s ease-out 0.4s forwards;
            animation: gallery 0.75s ease-out 0.4s forwards;
            margin-bottom: 0;
            overflow: hidden;
            opacity: 0;
            position: relative;
            width: 25%;
        }

.gallery .content .media a {
                display: block;
            }

.gallery .content .media img {
                -moz-transition: -moz-transform 0.2s ease-in-out;
                -webkit-transition: -webkit-transform 0.2s ease-in-out;
                -ms-transition: -ms-transform 0.2s ease-in-out;
                transition: transform 0.2s ease-in-out;
                max-width: 100%;
                height: auto;
                vertical-align: middle;
            }

.gallery .content .media:hover img {
                -moz-transform: scale(1.075);
                -webkit-transform: scale(1.075);
                -ms-transform: scale(1.075);
                transform: scale(1.075);
            }

I've tried to change margin:0 auto and adjust the percentage of width in CSS, but the images are still in the left side :(

Answer 1

Just add this css into your css File, it will automatically center the content.

Css::Align-horizontal center

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

Css::Align-vertically+horizontal center

 .content {
    display:flex;
    justify-content:center;
    align-items: center;
    }

Answer 2

The cause of this issue is your parent div not child, the best solution for you for make parent center is using flex with justify-content center, so first step, remove float from your child (.media) then add display: flex to your parent div, and make justify center:

.media {
    position: relative;
    width: 33%;
    margin:1.66% ;

}

.media a img {
    width: 100%;
}

#Parent {
    display: flex;
    justify-content: center;
}

<div id="Parent">
<div class="media">     
 <a href="images/fulls/01.jpg" class = "class_outer">
 <img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt=""  title="ICC profile）" />
 <span style="text-align:center" class="class_cover">text</span>
 </a>   
</div>

<div class="media">     
 <a href="images/fulls/02.jpg" class = "class_outer">
 <img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt=""  title="ICC profile）" />
 <span style="text-align:center" class="class_cover">text</span>
 </a>   
</div>
</div>