Estou tentando alinhar o texto ao centro da tela, tentei usar o transform:translateY(-50%)
com o top:50%
em position:absolute
, porém não funcionou, gostaria de saber como faço para arrumar isso, e se possível, algum exemplo funcional.
*A margem no topo do elemento diminui ao diminuir a largura da tela, mesmo que aumente ou não a altura.
#carrossel-principal{
position:relative;
height:100%;
overflow-y:hidden;
}
.carousel-caption{
font-family:"Open Sans",sans-serif;
overflow-y:hidden;
box-sizing:border-box;
padding:0;
position:absolute;
top:0;
height:100%;
}
.caption-holder{
vertical-align:middle;
position:absolute;
width:100%;
padding:0;
margin-top:50%;
transform:translateY(-50%);
}
<div id="carrossel-principal" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpeg" alt="banner 1">
<div class="carousel-caption">
<div class="caption-holder">
<h2>Nossa missão é fazer o bem!</h2>
<p>Você também pode nos ajudar</p>
</div>
</div>
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="banner 2">
<div class="carousel-caption">
<div class="caption-holder">
<h2>Doar é mais do que abrir mão de algo</h2>
<p>é estender a mão a alguém</p>
</div>
</div>
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="banner 3">
<div class="carousel-caption">
<div class="caption-holder">
<h2>Se você não tem nada para doar</h2>
<p>Doe um gesto de carinho a quem precisa</p>
</div>
</div>
</div>
</div>
</div>