與中心文本框重疊

Question

我在我的應用程序中使用懸停框顯示懸停的內容。但是，當盒子沒有被徘徊時，我不能在中間獲得文字。

這是我的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> 

這是我的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鏈接：https://plnkr.co/edit/2TiWlPG7cVIQ56zR5UGX

Answer 1

放在一個span和應用flex到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%; 
} 

讓我們來瞧瞧吧！