I'm having an overwhelming problem to center a text underneath an image in Bootstrap. I've tried everything, with position, table-cell.
.bloco-materia {
text-align: center;
padding: 25px 50px;
height: 200px;
background: #eee;
margin: 10px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
transform: translate3d(0,0,0);
transition-property: box-shadow,transform;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(.16,1,.29,.99);
}
.bloco-materia:hover {
filter: saturate(1.5);
transform: translate3d(0,-4px,0);
box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
transition-property: box-shadow,transform;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(.16,1,.29,.99);
}
.bloco-materia img{
height: 80px;
background: #000;
display: block;
margin: 0 auto;
}
.bloco-materia:hover img {
transform: scale(1.2);
}
.bloco-materia:hover h1 {
transform: scale(0.9);
opacity: 1;
}
.bloco-materia img, .bloco-materia h1 {
transition-property: all;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(.16,1,.29,.99);
}
.bloco-materia h1 {
font-family: 'SegoeUI', sans-serif;
font-weight: bold;
font-size: 25px;
color: #fff;
opacity: 0.6;
height: 95px;
display:table-cell;
vertical-align:middle;
}<div class="col-md-4">
<a href="#">
<div class="bloco-materia" style="background: #b26a00">
<img src="#">
<h1>Texto</h1>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#">
<div class="bloco-materia" style="background: #357a38">
<img src="../assets/images/materias/ciencias-natureza.png">
<h1>Ciências da Natureza e suas Tecnologias</h1>
</div>
</a>
</div>What is the best way to center the text vertically and horizontally, to fit both 2-line and 3-line text, or one line (like Copy)?