CS Grid の上下中央寄せにしたい

したいこと

二つのブロック要素をgridを使用して、上下中央にしたい

現状

画像のようになっており、縦方向の中央寄せをしたいと考えています。

コード

css
1.register_container {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  place-items: center;
5  justify-items: center;
6}

HTML
1<section id="">
2  <div class="register_container">
3    <div class="register_content">
4    
5      <div class="">
6        <%= link_to '新規登録（指導員）', new_instructor_path %>
7      </div>
8
9      <div class="">
10        <%= link_to 'ログイン（指導員）', new_instructor_session_path %>
11      </div>
12    </div>
13
14    <div class="register_content">
15      
16      <%# 学校側の新規登録 @ueda %>
17      <div class="">
18        <%= link_to '新規登録（教員）', new_instructor_path %>
19      </div>
20
21      <div class="">
22        <%= link_to 'ログイン（教員）', new_school_session_path %>
23      </div>
24    </div>
25  </div>
26</section>
27

現状のコードになります。

理想

デザインツールで簡単に作成しております。

このようにgridで横並びにし、上下中央寄せのgrid-gapを使用して間隔を取りたいと考えています。

教えていただけますと幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

上下中央というのが何に対しての中央なのか不明ですですが、
基準の高さを .register_container に設定する必要があります。
例えば、画面の高さに対して上下中央なら、height: 100vh;

画面に対して中央配置で、gapが50pxなら、下記で。

css
1.register_container {
2  display: grid;
3  grid-template-columns: auto auto;
4  grid-gap: 50px;
5  place-content: center;
6  height: 100vh;
7}
8
9.register_content {
10  display: grid;
11  grid-template-columns: auto;
12  grid-gap: 50px;
13}