如何使div内旋转-90°的p#rot元素文本垂直水平居中？

嘿，我来帮你搞定这个旋转后文本居中的难题！

你遇到的问题根源在于：当你对<p#rot>应用transform: rotate(-90deg)时，元素的视觉呈现会旋转，但它的布局流还是基于未旋转的原始盒子。普通的text-align和vertical-align是针对未旋转状态设计的，自然没法让旋转后的文本精准居中。

下面给你两种靠谱的解决方案，任选其一就能解决问题：

方案一：Flexbox布局（推荐，简洁易维护） #

利用Flexbox让父容器直接把子元素居中，再对p元素进行旋转，这样旋转后的文本会自然保持在容器中心：

div#leftPosText{
  position:absolute;
  padding:2vh;
  background-color:black;
  width:20vw;
  height:50vh;
  font-size:calc(5vh + 5vw);
  /* 添加Flex布局属性，直接让子元素水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

p#rot{
  transform:rotate(-90deg);
  color:white;
  /* 可选：如果旋转后有细微偏移，可调整旋转原点，默认是中心，一般不需要修改 */
  /* transform-origin: center center; */
}

原理说明 #

父容器通过display: flex变成Flex容器，justify-content: center实现水平居中，align-items: center实现垂直居中，先让<p#rot>在黑色区块里完全居中，再旋转元素，旋转后的文本就会正好落在区块的中心位置。

方案二：绝对定位 + Translate #

如果不想用Flexbox，也可以通过绝对定位结合translate来实现精准居中：

div#leftPosText{
  position:absolute;
  padding:2vh;
  background-color:black;
  width:20vw;
  height:50vh;
  font-size:calc(5vh + 5vw);
  /* 确保子元素绝对定位基于当前容器 */
  position: relative;
}

p#rot{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 先平移自身到父容器中心，再旋转 */
  transform: translate(-50%, -50%) rotate(-90deg);
  color:white;
  /* 去掉p元素默认的外边距，避免布局偏移 */
  margin: 0;
}

原理说明 #

1. 父容器设置position: relative，让子元素的绝对定位参考当前容器；
2. top: 50%; left: 50%把p元素的左上角移到父容器中心；
3. translate(-50%, -50%)把p元素自身的中心对齐到父容器中心；
4. 最后执行旋转，这样旋转后的文本就会精准居中。

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