CSS Vertical Align and fancyBox - html

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>