css - 在 jsfiddle 上使用 css 垂直居中文本

Question

在我的 jsfiddle 上，当鼠标悬停在图像上时，我实际上在顶部有一个文本。我想知道如何使用 css 将此文本垂直居中。这是我的 jsfiddle -> www.jsfiddle.net/kodjoe/4kurw7ap/

我知道我必须使用 display:inline-block 和 vertical-align:middle，但没有任何变化 ;-/也许我忘记了什么 ??

这是我的修改过的代码:

HTML:

<div id="wrapper"><div id="list">





<div alt="text here" class="item"><img class="imggrid" src="http://s5.favim.com/orig/141028/coffee-fashion-girl-grunge-Favim.com-2187377.jpg" alt=""></div>

<div alt="text here" class="item"><img class="imggrid" src="http://images0.chictopia.com/photos/highglossfashion/5948104335/high-gloss-fashion-dress_400.jpg" alt=""></div>
</div></div>

修改后的 CSS:

body { background: #f1f1f1; }


#wrapper { max-width: 1260px; margin: 0 auto; }

#list {
overflow: hidden;
margin-bottom: -30px; 
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 30px;
column-fill: auto;
}


.imggrid { width:100%; padding:10px;}

.imggrid:hover{ opacity: 0.9; }


.item { vertical-align: top; display: inline; margin-bottom: 30px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; }

@media only screen and ( max-width: 1024px ) {
#wrapper { max-width: 860px; margin: 0 auto; }
#list { -webkit-column-count: 2; -webkit-column-gap: 15px; -moz-column-count: 2; -moz-column-gap: 15px; column-count: 2; column-gap: 15px; }
.item { margin: 0px auto 15px auto;}
}


@media only screen and ( max-width: 600px ){ 
#wrapper { max-width: 440px; margin: 0 auto; }
#list { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; } 

}

div { position:relative; display:inline-block; }

div:after {
    content: attr(alt);
    height:80%;
    width:80%;
    margin: 0 auto;
    position:absolute;
    top:10%;
    left:10%;
    background:rgba(255, 255, 255, 1);
    text-align:center;
    color:black;
    display:inline-block;
    box-sizing:border-box;
    opacity:0;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;  
    -moz-transition: 0.4s all;
}

div:hover:after { opacity:1; }

Answer 1

请试试这个:

 div { position:relative; display:inline-block; vertical-align:middle; }
.centerDiv{
position:absolute;
    left:50%;
    top:50%;
}
.container
{
    text-align:center;
}
.centerDiv {
    content: attr(alt);
    height:80%;
    width:80%;
    margin: 0 auto;
    position:absolute;
    top:10%;
    left:10%;
    background:rgba(255, 255, 255, 1);

    text-align:center;
    color:black;
    display:inline-block;
    box-sizing:border-box;
    opacity:0;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;  
    -moz-transition: 0.4s all;
}
.centerDiv:hover { opacity:1; }

.content{
 top: 50%;
  transform: translateY(-50%);
    position:relative;
}
}

DEMO