如何在页面中实现对角线标题的水平垂直居中？

要实现旋转后的标题在页面中水平垂直居中，核心是先让标题在未旋转状态下居中，再应用旋转变换，同时确保父容器（body）占满整个视口高度。以下是可行的实现代码：

完整代码 #

<body>
  <h1 class="houses">HOUSES</h1>
</body>

/* 重置body默认样式，确保占满视口 */
body {
  margin: 0;
  min-height: 100vh;
  /* 使用flex布局实现子元素水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.houses {
  transform: rotate(-45deg);
  letter-spacing: 5rem;
  /* 防止大间距导致文本换行 */
  white-space: nowrap;
}

关键说明 #

• 给body设置min-height: 100vh让它占满浏览器视口高度，同时清除默认margin避免留白。
• 通过flex布局的justify-content: center和align-items: center，让标题在未旋转时就处于页面中心。
• 最后给标题添加旋转变换，此时元素会以自身中心为轴旋转，保持在页面中心位置。
• 加上white-space: nowrap避免大字母间距导致文本自动换行。

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