如何在Bootstrap布局中让旋转90度的span不受父块高度影响垂直居中？

嘿，这个问题我之前做项目的时候刚好遇到过！旋转元素后要实现垂直居中还不受父块高度限制，确实得绕开transform带来的一些小坑，给你几个实用的解决方案：

方案1：Flex布局+调整旋转原点（最省心，Bootstrap原生支持） #

利用Bootstrap内置的flex类，直接让父容器实现垂直水平居中，再配合旋转样式就能搞定：

<div class="row">
  <!-- 给父列添加flex布局类，同时设置最小高度作为居中参照 -->
  <div class="col-md-1 d-flex align-items-center justify-content-center" style="min-height: 200px;">
    <span style="transform: rotate(90deg); transform-origin: center center;">Text</span>
  </div>
  <div class="col-md-11">其他内容</div>
</div>

解释：d-flex align-items-center justify-content-center是Bootstrap的原生类，能让子元素自动在父容器内垂直水平居中；min-height可以根据你的需求设置（比如100vh占满视口，或者和右侧列高度匹配），这样旋转后的文本不会被父容器的高度限制，始终保持居中状态。

方案2：绝对定位+双Transform（适合高度不固定场景） #

如果父容器高度不确定，用绝对定位脱离文档流的方式更灵活：

<div class="row">
  <!-- 父列设置相对定位作为参照 -->
  <div class="col-md-1 position-relative" style="min-height: 200px;">
    <span style="position: absolute; top: 50%; left: 50%; 
                transform: translate(-50%, -50%) rotate(90deg);">Text</span>
  </div>
  <div class="col-md-11">其他内容</div>
</div>

解释：先通过top: 50%; left: 50%把元素定位到父容器的中心点，再用translate(-50%, -50%)调整元素自身的偏移（因为旋转是基于元素自身中心的），最后加上旋转样式。这种方式下，文本完全脱离父容器的文档流，不会受父容器高度变化的影响。

方案3：用writing-mode替代rotate（更自然的垂直文本） #

如果只是需要垂直排列的文本，没必要用rotate，直接用CSS的排版属性更省心：

<div class="row">
  <div class="col-md-1 d-flex align-items-center justify-content-center" style="min-height: 200px;">
    <span style="writing-mode: vertical-rl; text-orientation: upright;">Text</span>
  </div>
  <div class="col-md-11">其他内容</div>
</div>

解释：writing-mode: vertical-rl让文本垂直排列，text-orientation: upright让文字保持正立（如果需要文字横向旋转可以去掉这个属性）。这种方式不需要处理transform的偏移问题，兼容性也很好，是垂直文本场景的最优解。

小提醒： #

• 不管用哪种方案，记得给父列（col-md-1）设置最小高度或者固定高度，不然居中的参照容器高度为0，效果就出不来啦。
• 如果旋转后文本位置有点偏移，可以调整transform-origin的值（比如transform-origin: top center），根据你的布局需求微调。

内容的提问来源于stack exchange，提问作者Karabah