CSS Vertical Align and fancyBox

Question

I am working on a photo gallery(using fancyBox and PHP) for my photography page, and I can't figure out how to make the vertical align for my image gallery to be centered.

I currently have placed mock images(from my own gallery) to figure out the layout, and I will then replace them with a PHP query to fill up the gallery with all my content automatically. I have also given each row a (temporary) different color to simply visualize the layout, as well as having a 12 division layout bar at the top for easier handling. The way I currently have my HTML and CSS code set up is as follows:

HTML:

<div class="gallery">
<div class="row row-one">
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='images/photography/thumbs/burnaby_mountain.jpg'></a>
        </div>
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='images/photography/thumbs/lions_gate.jpg'></a>
        </div>
        <div class="col-lg-4">
            <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive'  src='images/photography/thumbs/bubbles.jpg'></a>
        </div>
   </div>
</div>

CSS:

.gallery {
display: table;
 }
div .row-one {
background-color: red;
display: table-row;
vertical-align: middle;
}
.col-lg-4 {
display: table-cell;
}

As you can see, I have nested the columns inside rows(I did not include the other rows' CSS code, as they're the same except for the background-color attribute, with the intention of automating the gallery later through PHP queries) and rows inside a div container called gallery. From other examples I've seen through looking up for a solution, I've seen people give the main container the display attribute of table, and rows the attribute display: table-row, and lastly the column the table-cell attribute. I have tried this, as well as many other combinations of CSS attributes and have not found a way to center the gallery.

For a better visualization of what I would like to achieve

Thank you for your help, and excuse the lengthy question. I have been searching for a long time and it now feels like something in my code is faulty. I am fairly new to HTML/CSS and although most of my site is working as intended, this is the last bit I need to get it up and running.

Answer 1

Something like this?

.gallery {
  display: flex;
  height: 30%;
  /*   flex-direction:column; */
}

.box {
  border: 1px solid white;
  background: red;
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 10px;
}

.inner-box {
  align-self: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gallery">
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
    </div>
  </div>
</div>

<div class="gallery">
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
    </div>
  </div>
  <div class="box">
    <div class="inner-box">
      <a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
    </div>
  </div>
</div>