Wie vertikal innerhalb eines div ein div Zentrum, die Höhe

Question

CodePen

<div class="wrapper"> 
    <div class="logo"></div> 
    <div class="slogan"> 
     <div class="brand"> 
      <p>Contact us now!</p> 
     </div> 
    </div> 
</div> 

<style> 
body { 
    background-image:url(http://science-all.com/images/landscape/landscape-05.jpg); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    width: 100%!important; 
    padding:0; 
    margin:0; 
} 

.wrapper { 
    height:100%; 
} 

.logo { 
    height:250px; 
    background-color:aqua; 
} 

.slogan { 
    min-height:200px; 
    background-color:transparent; 
} 

.brand { 
    color:aqua; 
    font-size:25px; 
    text-align:center; 
} 

</style> 

Ich möchte den Slogan div Höhe einzustellen, basierend auf der Fenstergröße basierend auf Fenstergröße ändert (zB das Logo & Slogan haben div passt den gesamten Bildschirm an, wenn die Seite geöffnet ist. aber halten Sie das Logo div eine feste Größe. Das Problem, das ich jetzt habe, ist die vertikale Ausrichtung des Markentextes basierend auf der Größe des Divs.

Answer 1

Sie können Ihre .slogan div als flexbox anzeigen.

.slogan { 
    display: flex; /* Makes your slogan div flexbox */ 
    justify-content: center; /* Center the content of that div horizontally */ 
    align-items: center; /* Center the content of that div vertically */ 
    min-height:200px; 
    background-color:transparent; 
} 

Updated Codepen.

Answer 2

Sie können mit Flex-Box, die wahrscheinlich die beste Lösung ist, oder wenn Sie nicht wollen, zu tun, dass Sie die CSS Zent Hack verwenden:

.slogan { 
    position: relative; 
} 

.brand { 
    position:absolute; 
    left:50%; 
    top:50%; 
    transform:translate(-50%, -50%); 
    (use vendor prefixes as well) 

Answer 3

1. Sie setzen müssen .slogan in Position: relativ.
2. Sie ändern nur .brand in Position: absolut und setzen Position für sie.

body { 
 
background-image:url(http://science-all.com/images/landscape/landscape-05.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
width: 100%!important;# 
 
    padding:0; 
 
    margin:0;} 
 

 
.wrapper { 
 
    height:100%; 
 
} 
 

 
.logo { 
 
    height:250px; 
 
    background-color:aqua; 
 
} 
 

 
.slogan { 
 
    min-height:200px; 
 
    position: relative; 
 
} 
 

 
.brand { 
 
    color:aqua; 
 
    font-size:25px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="wrapper"> 
 
<div class="logo"></div> 
 
<div class="slogan"> 
 
    <div class="brand"> 
 
    <p> Contact us now!</p></div> 
 
    </div> 
 
</div>