如何让网页中姓名与职位垂直水平居中（兼容fixed边框）

一、不受固定元素干扰的居中实现方案 #

方案1：绝对定位+inset属性控制可用空间 #

这种方式能精准避开顶部固定边框的区域，实现完全居中：

body {
  margin: 0;
  position: relative;
}

/* 示例固定边框样式 */
.fixed-border {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  z-index: 99;
}

.landing {
  position: absolute;
  inset: 60px 0 0 0; /* 顶部预留60px给固定边框 */
  margin: auto;
  display: flex;
  flex-direction: column; /* 让姓名和职位垂直排列 */
  align-items: center;
  justify-content: center;
}

方案2：计算可用视口高度+盒模型适配 #

通过calc减去固定边框高度，配合盒模型确保布局不偏移：

body {
  margin: 0;
  padding-top: 60px; /* 匹配固定边框高度 */
  box-sizing: border-box;
}

.landing {
  height: calc(100vh - 60px);
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

方案3：CSS Grid全局居中 #

利用Grid的自动居中特性，简化代码：

body {
  margin: 0;
  padding-top: 60px;
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
}

二、当前HTML布局合理性分析 #

你的HTML布局是合理且推荐的：

• .landing作为容器，层级清晰，便于统一控制居中逻辑
• 姓名和职位拆分到独立的.landing1、.landing2中，方便单独设置字体、间距等样式
• 用<span class="v">包裹需要旋转的字母，针对性添加样式，语义明确，维护成本低

三、字母v的旋转效果实现 #

只需给.v添加以下样式即可（行内元素需转为可变换的行内块级元素）：

.v {
  display: inline-block;
  transform: rotate(180deg);
  transform-origin: center; /* 可选：设置旋转中心 */
  margin: 0 1px; /* 可选：调整与其他字母的间距 */
}

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