框内居中 2 行文本

Question

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

文本的定位由以下 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

遗憾的是，据我所知，使用 CSS scale() 的元素无法移动其他同级元素，因此在此演示中，我只关注元素的垂直和水平居中，它是 text-content:

.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 的硬编码值用于 move-up 标题。
将相同的值添加到其下方的绝对 description 文本元素的 margin-top（警告：希望您可以控制描述文本的长度，以免溢出总体元素 parent 高度...):

*{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> 元素，因此您不会依赖于该图像大小，因为它可能会弄乱您的内容。相反，它是一个 background-image 将 fully-cover cotnainer 块元素。如果你想让那些 parents 响应简单地使用 % for size (W/H) 而不是 px.

框内居中 2 行文本

Centre 2 line text in box

css

text

centering