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

Question

我有一个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>按垂直中心放置，与父块高度无关？

架构是：

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

如果您正在寻找类似的内容 - http://jsfiddle.net/XrWzq/843/

（删除边框，这就是你想要的）