Div内のDivを適切に中央に揃える方法

Question

応答が必要なため、画面の幅を小さくして要素を非比例で開始するまで機能するように見えます。 https://jsfiddle.net/gn8L0rxu/

「ホームスライダーキャプションcol-sm-12」のスワックは、さまざまなブラウザーのサイズに合わせて適切にサイズを変更する必要があります。私は本当の質問を理解していれば

section.home-slider { 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-color: black; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
    min-height: 630px; 
 
    position: relative; 
 
} 
 

 
section.home-slider .home-slider-caption { 
 
    width: 60%; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 25%; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    z-index: 1; 
 
} 
 
section.home-slider h1 { 
 
    color: #fff; 
 
    letter-spacing: -4px; 
 
    font-size: 5em; 
 
    font-weight: 100; 
 
    line-height: 1; 
 
    text-align: center; 
 
} 
 
section.home-slider p { 
 
    font-size: 1.3em; 
 
    color: #fff; 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
    <section class="home-slider" id="top"> 
 
     <div class="container"> 
 
      <div class="home-slider-caption col-sm-12"> 
 
       <h1>Sell Your Textbooks</h1> 
 
       <p>We'll pay top dollar for your used books!</p> 
 
       <a href="sell.html" class="btn btn-outline btn-primary btn-icon active btn-lg btn-rounded">Start Selling!<span class="fa fa-angle-right icon-with-btn"></span></a> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 1

、あなたがこれを行う必要があります。

section.home-slider .home-slider-caption { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); 
    -webkit-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    z-index: 1; 
} 

をまたずに* col-使用しない.row