下記サイトの会社情報の下記の部分のように、背景画像を中のコンテンツの上下中央にレスポンシブで配置するにはどうしたらよいのでしょうか？

Question

下記サイトの会社情報の下記の部分のように、背景画像を中のコンテンツの上下中央にレスポンシブで配置するにはどうしたらよいのでしょうか？

どうしても上下中央にになりません。
下記のpadding: 37rem 0 39rem 0;の上下どちらかを増やすとどちらかが減り、下記サイトのように背景画像が<div class="contact-wrap">の上下中央に来てくれません。

ＣＳＳ
.contact {
position: relative;
padding: 37rem 0 39rem 0;
width : 100%;
background: url(../img/common-img/contact-bg.jpg) no-repeat center top;
background-size: cover;
}

・https://www.theport.jp/

ＨＴＭＬ

<div id="company"> ~ </div>

ＣＳＳ
#company {
width: auto;
position: relative;
background: url(../images/bgCompany.jpg) no-repeat scroll center top;
background-size: cover;
padding: 140px 0 107px 0;
}

・自作サイトは下記のようにしたのですが、<div class="contact-wrap">の背景として<section class="contact" role="inquery">を採用しているのですが、どうしても上下の背景の真中に<div class="contact-wrap">が来てくれません。
remでも駄目なので、％ではなおさらうまくいきません。

ＨＴＭＬ

<section class="contact" role="inquery"> <div class="contact-wrap"> <h2 class="contactheading maincommon-heading">CONTACT</h2> <form class="contact-form" action="" role="form"> <dl> <dt><label for="name">お名前</label></dt> <dd class="contact-form__input-box"><input id="name" name="name" onclick=”” autofocus required></dd> <dt><label for="tel">電話番号</label></dt> <dd class="contact-form__input-box"><input id="tel" name="tel" onclick=”” required></dd> <dt><label for="email">メールアドレス</label></dt> <dd class="contact-form__input-box"><input id="email" name="email" onclick=””></dd> <dt><label for="contact-forminput-boxbody">コメント</label></dt> <dd class="contact-forminput-box_kind_textarea"><textarea id="contact-forminput-box__body" name="body" placeholder="具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd>

                        </dl>
                        <aside id="privacy">
                            
                        </aside> 
                        <button class="contact__submit-btn" type="submit">送信</button>
                    </form>    
                </div><!-- /.contact-wrap -->        
            </section><!-- /#about -->

ＣＳＳ
.contact {
position: relative;
padding: 37rem 0 39rem 0;
width : 100%;
background: url(../img/common-img/contact-bg.jpg) no-repeat center top;
background-size: cover;
}

Answer 1

---