html - 我怎样才能使这个文本 div 居中？

Question

我有一个带有悬停效果的图像 block ，其中出现了文本。我无法让文本垂直对齐。它保持水平，但我希望它始终响应居中。

.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;
}