リストのaタグを親要素いっぱいにして上下中央揃えにする方法

　試したこと

HTML

<div class="wrap-contents">
    <ul class="layout div2 nav">
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
    </ul>   
</div>

CSS

.nav{
    width: 100%;
    padding-top:10px;
}

.nav li {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 8px 8px;
}
.nav li a{
    text-decoration: none;
    text-align: center;
    
    // y軸のpaddingをいい感じに入れてもろて縦揃えしようとした
    padding: auto 0;
}

　試行錯誤の結果

HTML

<div class="wrap-contents">
    <ul class="layout div2 nav">
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
    </ul>   
</div>

CSS

.nav{
    width: 100%;
    padding-top:10px;
}

.nav li {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 8px 8px;
}
.nav li a{
    text-decoration: none;
    text-align: center;
    
    // 文字折り返し時のタテヨコ中央揃え
    position: relative;
    display: block;
    width: 100%;
    top: 50%;
    transform : translateY(-50%);
}