在框中居中 2 行文本

Question

我有 2 个框，其中一些文本位于每个框的中心。问题是当有 2 行文本时，文本不再居中。

Here's an example

文本的定位是由下面的 CSS 实现的，因为盒子有悬停效果：

margin: 50% 0 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);

关于如何使文本始终居中，即使有 2 行或更多行文本有什么想法吗？

谢谢！

Answer 1

不幸的是，AFAIK 没有办法使用 CSS scale() 的元素可以移动其他同级元素，因此在这个演示中，我只关注垂直和水平居中的元素，它是文本内容：

.block{
  background: none 50% / cover; 
  display:    table;
  height:     480px;
  width:      360px;
}
.caption{
  position:       relative;
  text-transform: uppercase;
  vertical-align: middle;
  background:     rgba(0,0,0,0.4);
  text-align:     center;
  font-size:      1.25em;
  display:        table-cell;
  color:          #fff;
}

<div class="block" style="background-image:url(http://placehold.it/300x190)">
  <div class="caption">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor<br>sit amet<br></p>
  </div>
</div>

现在，我使用硬编码值40px 将标题上移。
相同的值被添加到它下面的绝对 description 文本元素的 margin-top（警告：希望您可以控制描述文本的长度，这样它就不会溢出整个元素父级高度。 ..)：

*{margin:0; padding:0;}



.block{
  background: none 50% / cover; 
  display:    table;
  height:     480px;
  width:      360px;
  float:      left;
}
.caption{
  position:       relative;
  text-transform: uppercase;
  vertical-align: middle;
  background:     rgba(0,0,0,0.4);
  text-align:     center;
  font-size:      1.25em;
  display:        table-cell;
  color:          #fff;
}
.caption h2{
  transition:     0.5s;
  transform:      translate3d(0, 0, 0);
  padding: 15px;
}
.caption p{
  position:absolute;
  width:100%;
  padding-top: 15px;
  margin-top:  -40px; /* (same value*) */
  transition:     0.5s;
  transform:  scale(0);
}
.caption p:before{ /* thin white line */
  background: #fff;
  position:   absolute;
  content:    "";
  margin:     0 auto;
  height:     1px;
  width:      15%;
  right: 0; left: 0;top: 0;  
}
.block:hover h2{
  transform: translate3d(0, -40px, 0); /* (same value*) */
}
.block:hover p{
  transform:  scale(1);
}

<div class="block" style="background-image:url(http://topwalls.net/wallpapers/2012/04/flame-nebula-Space--480x360.jpg)">
  <div class="caption">
    <h2>Centered no matter how much text </h2>
    <p>Lorem ipsum dolor<br>sit amet<br>qwer<br>ASDF</p>
  </div>
</div>

<div class="block" style="background-image:url(http://placehold.it/300x190)">
  <div class="caption">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor<br>sit amet<br></p>
  </div>
</div>

请注意，我已删除 <img> 元素，因此您不会依赖该图像大小，因为它可能会弄乱您的内容。相反，它是一个完全覆盖 cotnainer 块元素的背景图像。如果您想让这些父母做出响应，只需使用 % 表示 size (W/H) 而不是 px。