如何在div的垂直中心放置块？答案

【问题标题】：How to place block in vertical center in div?如何在div的垂直中心放置块？
【发布时间】：2018-09-27 21:50:12
【问题描述】：

我有一个 HTML 结构，它基于 Bootstrap 模板：

<div class="row">
    <div class="col-md-1"><span>Text</span></div>
    <div class="col-md-11"></div>
</div>

我将text 旋转了 90 度：

transform: rotate(90deg);

如何在垂直中心放置此块<span>Text</span>，与父块高度无关？

架构是：

【问题讨论】：

你能重新创建一个 sn-p 以便我们可以看到代码工作
jsfiddle.net/XrWzq/828
没有旋转，因为 span 是内联元素 .. 所以这段代码不能重现你的猜测。我没有 CSS 了吗？
@Karabah 如果你想旋转span，你必须将它的显示设置为默认的内联。见updated fiddle
我觉得stackoverflow.com/questions/15138723/… 可能会对此有所帮助。

标签： html css

【解决方案1】：

你必须用 div 做所有事情？我建议table...

如果你正在寻找这样的东西 -- http://jsfiddle.net/XrWzq/843/

（去掉边框，这正是你想要的）

【讨论】：

【解决方案2】：

根据您所做的绘图并使用 Bootstrap，您可以使用 flex 属性，如下例所示：

span {
  display: inline-block;
  transform: rotate(90deg);
}

.d-flex {
  min-height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row align-items-center">
    <div class="col-md-1"><span>Text</span></div>
    <div class="col-md-11">Moew....</div>
</div>

【讨论】：