在 div 中垂直居中内容

Posted 2023-03-05

【中文标题】在 div 中垂直居中内容

【英文标题】：Vertically centering content within a div

【发布时间】：2014-11-28 04:07:26

【问题描述】：

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

【问题讨论】：

这个问题已经asked several times before。其中至少有一个可以回答您的问题。

【参考方案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;

【参考方案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>

【讨论】：

您现在有两个示例可供选择:)

【参考方案3】：

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

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

试试这个。

【讨论】：

虽然one line answers 和 sn-p-only 是可以接受的，但它们通常会导致答案被发送到审核队列 (q.v.)。此外，有时他们并没有受到社区的欢迎。提供一个简短的解释来解释答案如何解决问题通常是个好主意。

@jww 对不起，我没有太多时间写答案，只是给出了想法，我现在会更新。

在 Meta 上查看 Fastest Gun in the West Problem...

【参考方案4】：

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

position:absolute;
top: 50%;