0
我有一个图像块与悬停效果与文本出现。我无法使文本垂直对齐。它保持水平，但我希望它始终以响应为中心。我怎样才能让这个文本div中心？
.content3{
\t width: 100%;
\t height: auto;
\t float: left;
\t display: block;
}
#staffbox1, #staffbox2,#staffbox3,#staffbox4, #staffbox5, #staffbox6,#staffbox7,#staffbox8{
float: left;
width: 25%;
\t font-size: 100%;
\t color: #ffffff;
\t overflow: hidden;
}
#staffbox1 img, #staffbox2 img,#staffbox3 img,#staffbox4 img, #staffbox5 img, #staffbox6 img,#staffbox7 img,#staffbox8 img{
\t width: 100%; \t
\t display: block;
}
.staffboxcontent{
\t position: relative;
\t text-align: center;
\t width: 100%;
}
#staffbox1:hover #emmatext, #staffbox2:hover #georgetext, #staffbox3:hover #tomtext, #staffbox4:hover #pollytext, #staffbox5:hover #racheltext, #staffbox6:hover #tomstext, #staffbox7:hover #pedrotext, #staffbox8:hover #allantext{
\t display: block;
\t background-color: rgba(0, 0, 0, 0.5);
\t width: 100%;
\t height: 100%;
\t margin: 0 auto;
\t -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.text{
\t position: absolute;
}
#staff{
\t background-color: #e3e3e5;
\t color: #000000;
\t display: block;
\t padding: 1px 0px;
\t width: 100%;
\t margin: 0 auto;
}
#emmatext, #georgetext, #tomtext, #pollytext, #racheltext, #tomstext, #pedrotext, #allantext{
\t display: none;
\t line-height: 0;
\t
}<div class="content3" id="staffwrap">
\t \t <header id="staff"><h2>MEET OUR STAFF</h2></header>
\t <div id="staffbox1">
\t \t <div class="staffboxcontent" id="staffboxcontent1">
\t \t \t <div class="text" id="emmatext"><div id="textposition1"><header><h4>EMMA HUTCHISON</h4><h5>Creative Director</h5></header><p>Em’s been here since the start, along with our MD Gagey, she’s seen S C grow from 2 mates in a loft to the global agency spanning 3 continents you see before you today. She likes cats and works an average of 26hrs every day.</p></div>
\t \t \t </div><img src="img/portrait4.png"></div> \t
\t </div>
\t <div id="staffbox2">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="georgetext"><div id="textposition2"><header><h4>GEORGE HIGHAM</h4><h5>Head of Design</h5></header><p>George has been here for over 2 years now and makes everything look pretty. He loves bright colours and playing party tunes all day long.</p></div>
\t \t </div><img src="img/portrait2.png"></div>
\t </div>
\t \t <div id="staffbox3">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="tomtext"><div id="textposition3"><header><h4>TOM LOWLES</h4><h5>Junior Designer</h5></header><p>Tom joined us in the summer of 2016. Assist's George in making things look pretty and he just loves to fall of his skateboard and draw drawings.</p></div>
\t \t </div><img src="img/portrait1.png"></div>
\t </div>
\t \t <div id="staffbox4">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="pollytext"><div id="textposition4"><header><h4>POLLY BRYSON</h4><h5>Production Coordinator</h5></header><p>Polly deals with all things production, joining the company in early 2016. She loves making the office round of hot toddies and is always cooking up some delicious healthy concoction.</p></div>
\t \t </div><img src="img/portrait6.png"></div>
\t </div>
\t \t \t <div id="staffbox5">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="racheltext"><div id="textposition5"><header><h4>RACHEL LAI</h4><h5>Account Manager</h5></header><p>Polly deals with all things production, joining the company in early 2016. She loves making the office round of hot toddies and is always cooking up some delicious healthy concoction.</p></div>
\t \t </div><img src="img/portrait7.png"></div>
\t </div>
\t <div id="staffbox6">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="tomstext"><div id="textposition6"><header><h4>TOM SODEN</h4><h5>Consultancy Director</h5></header><p>Polly deals with all things production, joining the company in early 2016. She loves making the office round of hot toddies and is always cooking up some delicious healthy concoction.</p></div>
\t \t </div><img src="img/portrait5.png"></div>
\t </div>
\t \t <div id="staffbox7">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="pedrotext"><div id="textposition7"><header><h4>PEDRO GARVOA</h4><h5>Consultant</h5></header><p>Polly deals with all things production, joining the company in early 2016. She loves making the office round of hot toddies and is always cooking up some delicious healthy concoction.</p></div>
\t \t </div><img src="img/portrait8.png"></div>
\t </div>
\t \t <div id="staffbox8">
\t \t <div class="staffboxcontent">
\t \t \t <div class="text" id="allantext"><div id="textposition8"><header><h4>ALLAN GAGE</h4><h5>Director</h5></header><p>Polly deals with all things production, joining the company in early 2016. She loves making the office round of hot toddies and is always cooking up some delicious healthy concoction.</p></div>
\t \t </div><img src="img/portrait3.png"></div>
\t </div>
你的问题是行高：0和位置：绝对。只要删除行高：0，文本将按预期显示。 –
如果您不确切知道它是如何工作的，请不要使用绝对定位 –
（很少有人知道在最初几次尝试使用它之前绝对定位是如何工作的。） –