センターを垂直方向に浮動小数点にする

Question

垂直方向に浮動するdivとイメージをコンテナに合わせる必要があります。私は多くの方法を試しましたが、うまくいきません。

Something like this

http://codepen.io/catapanoa/pen/ygaKLy?editors=1100

 <div class="leftWrapper"> 
     <div class="title"> 
      Title 1<br> 
      <span class="subtitle">Subtitle 1</span> 
     </div> 
     </div> 
. 
. 
. 

Answer 1

これは垂直

.vert-center { 
    margin-top: 50%; 
    translate: transform-y(-50%); 
} 

Answer 2

.wrap { position:relative; } 
.center { 
width:100%; 
height:100%; 
top:0; 
right:0; 
left:0; 
bottom:0; 
display:flex; 
position:absolute; 
text-align:center; 
align-items:center; 
justify-content:center; 
} 



<div class="wrap"> 

    <div class="center"> 

     <div> 

      <h1>Title</h1> 

      <span>span</span> 

     </div> 

    </div> 

</div> 

Answer 3

.title 
{ 
    border: 1px solid green; 
    position: relative; 
    top:50%; 
    transform: translateY(-50%); 
}