他の要素がスペースを占有している場合、その要素を中央に配置します。

Question

イメージの中央に「Hello」テキストを配置し、応答性を保ちます。 .welcome divは.section1-bg divの後に来るので、テキストの高さを中心より下に落とします。

どのように私の「こんにちは」テキストを縦横両方向にセンタリングすることができますが、ナビバーをそのままにしてサイトを応答性に保ちますか？事前に

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-family: 'Spectral', serif; 
 
} 
 

 
.section1 { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.section1-bg { 
 
    background-image: url("Images/b.jpg"); 
 
    background-size: cover; 
 
} 
 

 
.welcome { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: 100vh; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid col-lg-12 section1 section1-bg"> 
 
    <div class="row"> 
 
    <navbar class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6"> 
 
     <div class="nav-left navbar-brand"> 
 
     BRAND 
 
     </div> 
 
     <div class="nav-right pull-right"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#section1 page-scroll">HOME</a></li> 
 
      <li><a href="#section2 page-scroll">ABOUT</a></li> 
 
      <li><a href="#section3 page-scroll">PROJECTS</a></li> 
 
      <li><a href="#section4 page-scroll">CONTACT</a></li> 
 
     </ul> 
 
     </div> 
 
    </navbar> 
 
    </div> 
 
    <div class="welcome text-center col-lg-offset-4 col-lg-4"> 
 
    <h1>Hello!</h1> 
 
    <h2>Want to see what I've made?</h2> 
 
    <a href="#section3 page-scroll">Yes!</a> 
 
    </div> 
 
</div>

感謝。

Answer 1

中央に配置するテキストの絶対配置を使用します。

プライマリコンテナの境界ボックスをposition: relativeにします。ここ

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-family: 'Spectral', serif; 
 
} 
 

 
.section1 { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: relative;     /* new */ 
 
    height: 100vh;      /* adjustment */ 
 
} 
 

 
.section1-bg { 
 
    background-image: url("http://i.imgur.com/60PVLis.png"); 
 
    background-size: cover; 
 
} 
 

 
.welcome { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    position: absolute;     /* new */ 
 
    left: 50%;       /* new */ 
 
    top: 50%;       /* new */ 
 
    transform: translate(-50%, -50%); /* new */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid col-lg-12 section1 section1-bg"> 
 
    <div class="row"> 
 
    <navbar class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6"> 
 
     <div class="nav-left navbar-brand">BRAND</div> 
 
     <div class="nav-right pull-right"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#section1 page-scroll">HOME</a></li> 
 
      <li><a href="#section2 page-scroll">ABOUT</a></li> 
 
      <li><a href="#section3 page-scroll">PROJECTS</a></li> 
 
      <li><a href="#section4 page-scroll">CONTACT</a></li> 
 
     </ul> 
 
     </div> 
 
    </navbar> 
 
    </div> 
 
    <div class="welcome text-center col-lg-offset-4 col-lg-4"> 
 
    <h1>Hello!</h1> 
 
    <h2>Want to see what I've made?</h2> 
 
    <a href="#section3 page-scroll">Yes!</a> 
 
    </div> 
 
</div>

jsFiddle demo

詳細：Element will not stay centered, especially when re-sizing screen