縦方向の中央揃えについて

Question

縦方向で中央に持って来たいのですが上手くいきません。
コードはこんな感じです。

       <section class="works">
            <section class="sec-title">
                <h2>Works</h2>
            </section>
            <section class="container">
                <article　class="item1">
                    <div class="item">
                       <img src="https://www.indetail.co.jp/wp-content/uploads/2017/12/css_grid_l.jpg" class="img-circle item-img">
                       <p>写真の説明</p>
                   </div>
                </article>
            </section>
        </section>

.container{
    grid-row: body;
    grid-column: 2 / -2;
    text-align: center;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:
                [body] auto;
}

.item1{
    grid-row: body;
    grid-column: 2 / -2;
    
    display: table;//この辺りでやってるつもりです。
}
.item{
    display: table-cell;//ここも
    vertical-align: middle;
}

よろしくお願いします。

Comments

[azuapricot]

ご提示のソースだけではなーんにも再現できないので、ちゃんとしたコードを提示しましょう。
Worksとaが表示されるだけで何がしたいのかまったくわかりません

Answer 1

align-self: center;

で解決しました。