链接文本不居中

Question

我无法将我的链接放在我的div上。我知道你可以使用行高，但我没有固定宽度或高度我的div它们都是根据屏幕的大小创建的。我试图垂直对齐但没有成功我确定我只是忽略了我的代码在这个小提琴中出现的问题示例。

https://jsfiddle.net/6vwdah5e/

<section class="home-images">
        <div class="photo-grid">
            <a href="">
                <h2>Item 1</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 2</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 3</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 4</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 5</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 6</h2>
            </a>
        </div>
    </section>