我有一个带有悬停效果的图像块，文字显示出来。我无法将文本垂直对齐。它保持水平但我希望它始终保持响应中心。
.content3{
width: 100%;
height: auto;
float: left;
display: block;
}
#staffbox1, #staffbox2,#staffbox3,#staffbox4, #staffbox5, #staffbox6,#staffbox7,#staffbox8{
float: left;
width: 25%;
font-size: 100%;
color: #ffffff;
overflow: hidden;
}
#staffbox1 img, #staffbox2 img,#staffbox3 img,#staffbox4 img, #staffbox5 img, #staffbox6 img,#staffbox7 img,#staffbox8 img{
width: 100%;
display: block;
}
.staffboxcontent{
position: relative;
text-align: center;
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{
display: block;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
margin: 0 auto;
-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{
position: absolute;
}
#staff{
background-color: #e3e3e5;
color: #000000;
display: block;
padding: 1px 0px;
width: 100%;
margin: 0 auto;
}
#emmatext, #georgetext, #tomtext, #pollytext, #racheltext, #tomstext, #pedrotext, #allantext{
display: none;
line-height: 0;
}<div class="content3" id="staffwrap">
<header id="staff"><h2>MEET OUR STAFF</h2></header>
<div id="staffbox1">
<div class="staffboxcontent" id="staffboxcontent1">
<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>
</div><img src="img/portrait4.png"></div>
</div>
<div id="staffbox2">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait2.png"></div>
</div>
<div id="staffbox3">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait1.png"></div>
</div>
<div id="staffbox4">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait6.png"></div>
</div>
<div id="staffbox5">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait7.png"></div>
</div>
<div id="staffbox6">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait5.png"></div>
</div>
<div id="staffbox7">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait8.png"></div>
</div>
<div id="staffbox8">
<div class="staffboxcontent">
<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>
</div><img src="img/portrait3.png"></div>
</div>
答案 0 :(得分：0)
只需使用flexbox即可，您可以添加以下CSS
.staffboxcontent {
align-items: center;
display: flex;
justify-content: center;
}
答案 1 :(得分：0)
我理解你的担忧。
如果.text位置是绝对的，请同时指定（上，左，下，右）
尝试位置是可行的： 相对的。
答案 2 :(得分：0)
我相信你可以用
实现这一目标h4{
margin-top:auto;
margin-bottom:auto;}
您可能需要使用悬停框高度来获取所有文本。
答案 3 :(得分：0)
感谢所有帮助。我设法使用以下针对所有#textpositions使用以下css的解决方案来解决问题。
position:relative;
line-height: 1.5;
height: auto;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);