在 div 中垂直居中内容

Question

我正在尝试使用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 获得。

Answer 1

看看这个。我让它变得非常简单。关键是在父母身上设置line-height，在孩子身上设置vertical-align（不是父母！）。 vertical-align 仅在一行的空间内有效。即使你有一个带有height:300px; 的div，默认的行高也会是font-size，所以你需要手动设置它。

http://jsfiddle.net/y6mx14pz/

div{
    text-align:center;
    line-height:300px;
    border:1px solid black;
}

h1{
    vertical-align:middle;
}

Answer 2

我使用display: inline-block 准备了这个示例，而不是表格单元格，因此它们可以换行，并且我删除了所有不需要的 HTML 标记。

主要 CSS 属性

• 文本使用伪元素.product:before 居中。本质上，这个元素强制内联文本在中间垂直对齐。如果您需要它在 IE6 - 7 中工作，可以将其替换为 div。

• 在.product 悬停之前，文本的不透明度为0。

• 图像是position: absolute，并将相对于它的position: relative 父对象定位自身。需要将其从流中拉出以对齐文本。

• 过渡平滑了不透明度的变化。 .product 有一个白色边框，以便在悬停时可以转换为黑色边框。

注意： 目前对于不支持opacity 的浏览器（即IE6 和7）没有后备方案。如果需要，可以在IE 6 / 中使用display: none 来实现。 7 条件样式表。

2 个例子

“显示代码 sn-p”并运行它。

我们不需要愚蠢的 div

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

使用 div -“我不希望他们随便点击！”

• .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>

Answer 3

table-cell 是垂直居中，text-align:center 是水平居中。

.hovertop1 a {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

试试这个。

Answer 4

尝试将position:relative; 添加到包含<h2> 的div，然后将其添加到<h2> 元素：

position:absolute;
top: 50%;