縦と横の整列（Boostrap 4）

Question

テキストとボタンを水平方向にも垂直方向にも整列しようとしていますが、それはできません。 最終的には整列が敏感でした。 マイコード： HTML：

<div id="stage"> 
    <div id="stage-caption"> 
     <h1 class="display-3">Gallery Nellija</h1> 
     <p>Some description</p> 
     <a href="" class="btn btn-lg btn-success">Sign up now</a> 
    </div> 
</div> 

CSS：

#stage { 
    background: url('img/stage.jpg') center center no-repeat; 
    background-size: cover; 
    color: white; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

#stage-caption { 
    font-size: 1.4rem; 
    font-weight: 200; 
    max-width: 60rem; 
    margin: 0 auto; 
} 

#stage-caption h1 { 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

、今ではそのように見える場合：事前に

ありがとう！

Answer 1

追加text-align:center~