在可调整大小的 div 中垂直居中类型答案

【问题标题】：Center type vertically in resizable div在可调整大小的 div 中垂直居中类型
【发布时间】：2015-03-30 08:40:45
【问题描述】：

我知道这已经被回答了一千次，但我发现似乎没有任何效果。我有全宽图片，可以使用导航器窗口调整大小。然后我在中间有一个盒子，里面有文字。图像框和类型正在按预期调整大小，但我似乎无法使类型以多行文本为中心。这是我的 HTML：

<div class="block-full">
    <div class="info-box-full">
        <div class="slide-info">
            <span><?php echo $ss_slide_post_title?><br><?php echo $ss_slide_post_desc;?></span>
        </div>
    </div>
<img src="<?php echo $image_link[0];?>" alt="">
</div>

这是我的 CSS：

.block-full {
    height: 0;
    overflow: hidden;
    padding-bottom: 45%;
    position: relative;
    text-align: center;
    width: 100%;
}
.info-box-full {
    background-color: rgba(255, 255, 255, 0.8);
    height: 26%;
    margin-left: 40%;
    position: absolute;
    top: 37%;
    vertical-align: middle;
    width: 20%;
    z-index: 9999;
}
.slide-info {
    font-size: 1vw;
    line-height: 1;
    margin-top: 25%;
    text-align: center;
}
span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}

感谢您的帮助！

【问题讨论】：

标签： html css center vertical-alignment resizable

【解决方案1】：

您想要的是 html 标签内的 style="text-align:center" ，它将根据容器的大小相对地居中标签内的所有文本。

【讨论】：

【解决方案2】：

使用弹性盒。

浏览器支持：http://caniuse.com/#search=flexbox

快速入门：http://css-tricks.com/snippets/css/a-guide-to-flexbox

* { margin:0; padding:0 }

figure {
  display: flex;
  background: url('http://i.imgur.com/urlCI95.jpg');
  background-size: cover;
  height: 200px;
}

figcaption {
  color: white;
  text-align: center;
  margin: auto;
}

<figure>
  <figcaption>Vertically centered text.</figcaption>
</figure>

可编辑演示：http://jsbin.com/fagopu/2

【讨论】：