嘿，针对你问的div容器中文本水平居中+垂直对齐的需求，我分两种常见场景来给你梳理方案，还结合你提供的侧边栏垂直文本代码做了优化说明：

一、常规文本的水平+垂直居中（非旋转文本） #

这几种方法是日常开发里最常用的，适配不同场景：

1. Flexbox布局（最推荐，适配多/单行文本） #

Flexbox是现代浏览器支持最好的方案，不管容器内文本是单行还是多行，都能完美居中：

.container {
  display: flex;
  justify-content: center; /* 控制水平方向居中 */
  align-items: center;     /* 控制垂直方向居中 */
  height: 200px; /* 给容器设置固定高度，或者用min-height适配内容 */
}

2. Grid布局（极简写法） #

Grid布局更简洁，一行代码就能同时实现水平+垂直居中：

.container {
  display: grid;
  place-items: center; /* 同时作用于水平和垂直方向 */
  height: 200px;
}

3. 行高法（仅适合单行文本） #

如果你的文本是固定单行，用行高等于容器高度的方法最直接：

.container {
  height: 200px;
  line-height: 200px; /* 行高与容器高度一致 */
  text-align: center; /* 水平居中 */
}

⚠️ 注意：这种方法不适合多行文本，会导致行间距过大、文本重叠。

二、针对你提供的垂直旋转文本的对齐优化 #

你给出的代码是侧边栏的垂直旋转文本（旋转-90度），我调整了部分样式，让文本在侧边栏容器里更精准地对齐：

/* 父容器：添加相对定位，为子元素绝对定位做参考 */
.floatsidebar { 
  height: 100%; 
  float: left; 
  overflow: hidden; 
  width: 30px; 
  line-height: 1.5;
  position: relative;
}

/* 垂直文本：调整transform原点和位移，实现侧边栏内的垂直居中 */
.vertical-text { 
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap; 
  /* 调整translate值和transform-origin，让旋转后的文本垂直居中 */
  transform: translate(50%, 100%) rotate(-90deg); 
  transform-origin: center bottom; 
  font-size: 19px; 
  color: grey; 
}

.vertical-text:after { 
  content: "..."; 
  float: left; 
  margin-top: 100%; 
}

.sidebarmain:hover { 
  background: linear-gradient(to right, white, #a6a6a6) 
}

.container-design { 
  min-height: 100%; 
  background: white; 
  box-sizing: border-box; /* 补充完整box相关样式，避免布局溢出 */
  /* 你可以继续补充box-shadow等其他样式 */
}

调整说明：给.floatsidebar添加position: relative，让.vertical-text基于父容器定位；修改transform-origin为center bottom，并调整translate的X轴位移为50%，这样旋转后的文本就能在侧边栏里垂直居中，同时水平方向也能对齐。

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