我正在尝试使用display:table-cell结合vertical-align: middle将div中的某些h2文本垂直居中。
然而，这似乎不起作用，因为我试图将内容集中在的div是另一个div的孩子。
这是我的CSS和HTML：
.productList {
width: 100%;
max-width: 1120px;
position: relative;
margin: 0 auto;
}
.hoverbase1 {
float: left;
margin: 15px;
width: 250px;
height: 250px;
position: relative;
}
.hoverbase1 a br {
display: none;
}
.hoverbase1 img {
width: 250px;
height: 250px;
position: relative;
}
.hovertop1 {
position: absolute;
width: 250px;
height: 250px;
bottom: 0;
left: 0;
background-color: white;
border: 2px solid black;
opacity: 0;
display: table-cell;
vertical-align: middle;
}
.hoverbase1 a:hover + .hovertop1,
.hovertop1:hover {
opacity: 1;
}<div class='productList'>
<div class='hoverbase1'>
<a href='http://kingfisher.org.au/library-shelving'>
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
</a>
<div class='hovertop1'>
<a href='http://kingfisher.org.au/library-shelving'>
<h3>Library Shelving</h3>
</a>
</div>
</div>
</div>
也可以a fiddle。
答案 0 :(得分：4)
我用display: inline-block而不是table-cell准备了这个例子，所以他们可以换行并删除所有不需要的HTML标记。
使用伪元素.product:before对文本进行居中。本质上，此元素强制内联文本在中间垂直对齐。如果你需要在IE6 - 7中使用它，它可以用div替换。
在.product悬停之前，文字会被赋予0不透明度。
图片为position: absolute，并将自己与其position: relative父级相关联。需要这样才能将其拉出流程以对齐文本。
过渡可平滑不透明度变化。 .product被赋予白色边框，以便在悬停时可以转换为黑色边框。
注意：目前，不支持opacity的浏览器，即IE6和7，没有回退。如果需要，可以使用display: none来实现这一点。 IE 6/7条件样式表。
“显示代码段”并运行它。
课程.product被赋予<a>元素，整个框就是一个链接。
<a class="product" href="href='http://kingfisher.org.au/library-shelving">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<h2>Library Shelving</h2>
</a>
.product {
width: 250px;
height: 250px;
display: inline-block;
vertical-align: middle;
position: relative;
border: solid 1px #FFF;
transition: border 1s;
text-align: center;
}
.product:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
.product img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s;
}
.product:hover {
border: solid 1px #000;
}
.product:hover img {
opacity: 0;
}
.product h2 {
opacity: 0;
transition: opacity 0.5s;
font-weight: none;
display: inline;
font-size: 1em;
}
.product:hover h2 {
opacity: 1;
}
.product {
text-decoration: none;
}<a class="product" href="href='http://kingfisher.org.au/library-shelving">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<h2>Library Shelving</h2>
</a>
类.product被赋予包含图像和文本的div。只有文字是链接。
<a>是相对位置，因此可以z-index: 2确保它是可点击的。这主要适用于IE8和9.
图片获得z-index: 1，以便将其置于<a>
<div class="product">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<a href="href='http://kingfisher.org.au/library-shelving">
Library Shelving
</a>
</div>
.product {
width: 250px;
height: 250px;
display: inline-block;
vertical-align: top;
position: relative;
text-align: center;
border: solid 1px #FFF;
transition: border 1s;
}
.product:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
.product img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s;
z-index: 1;
}
.product:hover {
border: solid 1px #000;
}
.product:hover img {
opacity: 0;
}
.product a {
position: relative;
text-decoration: none;
font-weight: normal;
opacity: 0;
transition: opacity 0.5s;
z-index: 2;
}
.product:hover a {
opacity: 1;
}
a:hover {
text-decoration: underline;
}<div class="product">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<a href="href='http://kingfisher.org.au/library-shelving">
Library Shelving
</a>
</div>
答案 1 :(得分：0)
table-cell使其成为垂直中心，与往常一样，text-align:center执行水平居中。
.hovertop1 a {
display: table-cell;
vertical-align: middle;
text-align:center;
}
试试这个。
答案 2 :(得分：0)
尝试将position:relative;添加到包含<h2>的div，然后将其添加到<h2>元素：
position:absolute;
top: 50%;
答案 3 :(得分：0)
检查一下。我做得非常简单。关键是在父母上设置line-height，在孩子上设置vertical-align（不是父母！）。 vertical-align仅适用于行间距。即使您的div为height:300px;，默认行高也为font-size，因此您需要手动设置。
div{
text-align:center;
line-height:300px;
border:1px solid black;
}
h1{
vertical-align:middle;
}