如何在全设备上居中页面元素并解决响应式间隙问题

主页包含Logo、导航按钮及导航下方的社交媒体图标，Logo位于导航上方。移动端显示正常，但桌面端（尤其是大尺寸屏幕）Logo与导航的间隙会随视口宽度增加而过度变大。尝试过针对多种屏幕尺寸编写媒体查询手动调整间隙，均未解决问题，希望通过Flex布局等CSS方案一次性适配所有屏幕，无需繁琐的媒体查询。

问题根源 #

原代码中：

• .logo-container 使用 height: calc(100vh - 130px) 强制占满视口高度减去固定值
• .btm-nav 使用固定定位 top: 65% 定位在视口65%高度处
  两者结合导致大屏幕下，Logo容器的高度和导航的固定定位位置产生冲突，间隙随视口高度增加而被拉大。

解决方案 #

将整个页面改为垂直Flex布局，让Logo和导航自然垂直排列，通过固定的间距值控制两者间隙，确保所有屏幕尺寸下间隙一致：

修改后的CSS代码 #

@font-face {
  font-family: IDIDNTSTEALTHIS;
  src: url(https://static.wixstatic.com/ufonts/617a47_069dbc8c08b34b95bda387f5d2f9b534/woff2/file.woff2);
}

html {
  height: 100%;
  width: 100%;
  font-family: IDIDNTSTEALTHIS;
  box-sizing: border-box;
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* 关键修改：将body设为垂直Flex布局，内容居中 */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 去掉原有的固定高度计算 */
  flex-shrink: 0;
}

header#SiteHeader {
  display: none;
}

/* 关键修改：去掉固定定位，让导航在Flex布局中自然排列 */
.btm-nav {
  width: auto;
  align-items: center;
  text-align: center;
  /* 设置固定的上间距，控制与Logo的间隙 */
  margin-top: 40px;
}

.btm-nav i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: white;
  padding-top: 1px;
}

.btm-nav h1 {
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: IDIDNTSTEALTHIS;
  margin: -2px 0px 0px;
}

a,
:active,
:hover,
:visited {
  text-decoration: none;
}

.context-menu {
  display: none;
}

.menu-button {
  display: block;
  width: 100%;
  height: 25px;
  background-color: #000000;
  margin-bottom: 0;
  text-align: center;
  line-height: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 10px;
}

.menu-button:hover {
  background-color: #3E3E3E;
}

.social-media-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.social-media-button {
  flex-grow: 1;
  height: 40px;
  background-color: #0B0B0B;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  width: calc(25% - 1px);
  border: 1px solid #cecece;
  border-radius: 5px;
  margin-left: 2px;
}

.social-media-button:hover {
  background-color: #363636;
}

.social-media-button i {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.social-media-button i {
  color: #FFFFFF;
}

i.fa-brands.fa-discord {
  margin-top: 0px;
}

.btm-nav-1 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-2 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.btm-nav-3 {
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.btm-nav-4 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.logo-container img {
  max-width: 134px;
  max-height: 89%;
}

.btm-nav-1,
.btm-nav-2,
.btm-nav-3,
.btm-nav-4,
.btm-nav-5 {
  flex-grow: 1;
  margin: 5px;
  background-color: #000;
  border: 0.05px solid #FFF;
  padding: 1px;
  width: 134px;
  height: 20px;
}

.btm-nav-1:hover,
.btm-nav-2:hover,
.btm-nav-3:hover,
.btm-nav-4:hover,
.btm-nav-5:hover {
  border: 2px solid #FFF;
  border-radius: 5px;
  padding: 0;
}

.social-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 12px;
}

.social-link {
  margin: 0px 5px;
}

修改说明 #

1. <body> 布局调整：设置为垂直Flex布局，justify-content: center 让整体内容在视口中垂直居中，align-items: center 水平居中，确保所有屏幕下内容位置一致。
2. .logo-container 优化：去掉固定高度计算，仅保留居中对齐逻辑，让Logo自适应大小。
3. .btm-nav 定位调整：移除固定定位，通过margin-top: 40px设置与Logo的固定间隙，该值可根据视觉需求调整，确保所有屏幕下间隙统一。

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