box overlay with text in center - html

Question

I'm using a hover box in my application which shows a content on hover. However , I am not able to get the text in the middle when the box is NOT hovered.
This is my html:
<div class="container">
<div class="col-xs-3" style="padding-top: 20px;">
<div class="box box-type-double">
<div class="box-hover" href="#">
<div class="box-info">
<div class="date">
<p>Design Mixes</p>
</div>
<div class="line"></div>
<div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</div>
<div class="box-content">Design Mixes</div>
</div>
</div>
</div>
This is my Css:
.box {
text-align: center;
/*float: left;*/
/*margin: 5px;*/
position: relative;
}
.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
background-color: #b4a28f;
}
.box-hover,
.box-hover .mask,
.box-img {
position: absolute;
top: 0;
left: 0;
}
.box-type-double .box-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-decoration: none;
text-align: center;
}
.box-type-double .box-info {
z-index: 10;
color: #ffffff;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 5;
height: 200px;
}
.box-type-double .box-info .headline {
font-size: 15px;
width: 90%;
margin: 0 auto;
}
.box-type-double .box-info .line {
height: 2px;
width: 0%;
margin: 15px auto;
background-color: #ffffff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box-type-double .box-info .date {
font-size: 10px;
}
.box-type-double .box-hover .mask {
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 0;
}
.box-type-double .box-hover:hover .line {
width: 90%;
}
.box-type-double .box-hover:hover {
opacity: 1;
}
.box-content {
font-size: 15px;
background-color: #3178b9;
color: white;
z-index: 0;
height: 200px;
}
Plunker link : https://plnkr.co/edit/2TiWlPG7cVIQ56zR5UGX

Answer 1

Put it in a span and apply flex to box-content
.box {
text-align: center;
/*float: left;*/
/*margin: 5px;*/
position: relative;
}
.box,
.box-hover,
.box-hover .mask,
.box-img,
.box-info {
background-color: #b4a28f;
}
.box-hover,
.box-hover .mask,
.box-img {
position: absolute;
top: 0;
left: 0;
}
.box-type-double .box-hover {
z-index: 5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
cursor: pointer;
display: block;
text-decoration: none;
text-align: center;
}
.box-type-double .box-info {
z-index: 10;
color: #ffffff;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 5;
height: 200px;
}
.box-type-double .box-info .headline {
font-size: 15px;
width: 90%;
margin: 0 auto;
}
.box-type-double .box-info .line {
height: 2px;
width: 0%;
margin: 15px auto;
background-color: #ffffff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box-type-double .box-info .date {
font-size: 10px;
}
.box-type-double .box-hover .mask {
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 0;
}
.box-type-double .box-hover:hover .line {
width: 90%;
}
.box-type-double .box-hover:hover {
opacity: 1;
}
.box-content {
font-size: 15px;
background-color: #3178b9;
color: white;
z-index: 0;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="col-xs-3" style="padding-top: 20px;">
<div class="box box-type-double">
<div class="box-hover" href="#">
<div class="box-info">
<div class="date">
<p>Design Mixes</p>
</div>
<div class="line"></div>
<div class="headline">Mix Designs Grade of all concrete’s, DLC, PQC, BM, and DBM, BC.</div>
<div class="line"></div>
</div>
<div class="mask"></div>
</div>
<div class="box-content"><span>Design Mixes<span></div>
</div>
</div>
</div>

Answer 2

.box-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box-type-double .box-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
Let's check it out !