如何实现边框盒子内文本垂直居中，并将网格在页面右侧垂直居中

看起来你现在卡在两个居中问题上——盒子里的文本垂直居中和右侧网格的整体垂直居中，我来帮你一步步搞定这俩问题～

一、解决边框盒子内文本垂直居中 #

你现在的.overall-profile-image已经有固定高度了，咱们直接用Flex布局就能轻松让里面的h1同时实现垂直+水平居中，不用瞎调margin/padding破坏布局。

修改.overall-profile-image的CSS，在你原有的样式基础上新增这几行：

.overall-profile-image {
  /* 保留你原来的所有样式：边框、阴影、背景色等 */
  display: flex;
  justify-content: center; /* 控制水平方向居中 */
  align-items: center; /* 控制垂直方向居中 */
}

原理很简单：Flex布局会让容器内的子元素（这里就是h1）根据你设置的规则自动对齐，因为盒子有固定高度，align-items: center直接就能把文本钉在垂直中点上，justify-content: center则保证水平居中。

二、解决网格在页面右侧垂直居中的问题 #

这个问题的核心是让整个页面的容器占满视口高度，这样才能实现“垂直居中”的基础，同时把网格推到右侧。咱们分三步改：

1. 先让html和body占满整个视口高度，不然父容器没法撑满页面：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 修改#main-part的CSS，把它改成占满高度的Flex容器，用space-between把左侧名字和右侧网格分开，同时实现整体垂直居中：

#main-part {
  display: flex;
  justify-content: space-between; /* 让左右元素分别靠向容器两端 */
  align-items: center; /* 让所有子元素在垂直方向居中 */
  height: 100%; /* 占满整个视口高度 */
  padding: 0 5%; /* 左右留边距，避免内容贴在页面边缘 */
}

3. 调整.overall-profile的margin，去掉原来的上下margin避免影响居中效果：

.overall-profile {
  /* 保留你原来的grid布局样式 */
  display: grid; /* 把inline-grid改成grid，父容器是flex时inline属性没用 */
  max-width: 50%; /* 限制网格宽度，避免太宽撑破布局 */
  margin: 0; /* 去掉原来的10% 5%，靠父容器的padding控制边距 */
}

完整修改后的CSS代码 #

把上面的修改整合后，最终的CSS代码如下（保留了你原有的所有样式，只加了关键的居中规则）：

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 

html, body {
  height: 100%;
}

html { 
  background: #ADA996; 
  background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
} 

#name{ 
  font-family: "Tangerine", cursive, sans-serif; 
  font-size: 6.5rem; 
  margin-right: 2rem; /* 给名字和网格之间留一点空隙，比百分比更稳定 */
} 

.overall-profile{ 
  display: grid;
  max-width: 50%; 
  grid-template-columns: repeat(2, 1fr); 
  grid-auto-rows: 1fr; 
  align-items: center; 
  gap: 26px; 
} 

#main-part{ 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  height: 100%; 
  padding: 0 5%; 
} 

@media (max-width: 532px) { 
  .overall-profile { 
    grid-template-columns: 1fr; 
    max-width: 100%; /* 小屏幕下网格占满宽度 */
  }
  #main-part {
    flex-direction: column; /* 小屏幕下名字和网格垂直排列 */
    justify-content: center; /* 垂直排列后整体居中 */
    gap: 2rem; /* 名字和网格之间留空隙 */
  }
  #name {
    margin-right: 0; /* 小屏幕下去掉右边距 */
  }
} 

.overall-profile-image { 
  border-style: groove; 
  border-radius: 18px; 
  border: 10px solid black; 
  height: 380px; 
  width: 400px; 
  text-shadow: 2px 2px 3px rgba(0,0,0,.2); 
  box-shadow: -6px -6px 26px rgba(255,255,255,.83), 5px 10px 15px rgba(0,0,0,.05), 15px 20px 35px rgba(0,0,0,.1), inset -2px -2px 2px rgba(0,0,0,.1), inset -1px -1px 3px rgba(255,255,255,.6), inset 2px 2px 8px rgba(255,255,255,.2), inset 1px 1px 8px rgba(255,255,255,.2), -6px -6px 26px rgba(255,255,255,.8); 
  background-color: #e9e9ef; 
  margin: auto; 
  transition: 300ms ease-out; 
  cursor: pointer; 
  /* 新增的居中样式 */
  display: flex;
  justify-content: center;
  align-items: center;
} 

.overall-profile-image:hover { 
  box-shadow: 4px 4px 6px rgba(0,0,0,.2), 5px 10px 35px rgba(0,0,0,.1), 8px 10px 25px rgba(0,0,0,.1), inset -1px -1px 9px rgba(0,0,0,.2), inset -1px -1px 3px rgba(255,255,255,.6), inset 1px 1px 8px rgba(255,255,255,1), inset 4px 4px 24px rgba(0,0,0,.15), -5px -5px 15px rgba(255,255,255,.9); 
  transform: scale(.98);
} 

@media (max-width: 1200px) { 
  .overall-profile-image h1{ 
    font-size: 1rem; 
  } 
}

HTML部分完全不用修改，保持你原来的结构就行。

这样修改后，两个居中问题就都解决了——盒子里的文本完美居中，右侧网格也会在页面右侧垂直居中，而且原来的响应式布局也不受影响～

内容来源于stack exchange