如何使该文本div居中？

Question

我有一个带有悬停效果且出现文字的图像块。 我无法使文本垂直对齐。 它保持水平，但我希望它始终保持响应中心。

 .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&nbsp;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> 

Answer 1

只需使用flexbox即可，您可以添加以下CSS

.staffboxcontent {
    align-items: center;
    display: flex;
    justify-content: center;
}

Answer 2

我了解您的担心。

如果.text位置是绝对的，还请指定（顶部，左侧，底部，右侧）

尝试定位：相对。

Answer 3

我相信您可以通过实现

h4{
 margin-top:auto;
 margin-bottom:auto;}

您可能需要使用悬停框的高度来获取所有文本。

Answer 4

感谢您的所有帮助。 我设法通过对所有#textpositions使用以下css的以下解决方案来解决此问题。

position:relative;
line-height: 1.5;
height: auto;
width: 70%;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);