如何在376x560px页面中垂直水平居中含Ul/Li的Div容器

要在376px×560px的页面内实现导航容器垂直水平居中、且不覆盖logo的布局，可按以下方式修改代码：

修改后的CSS代码 #

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 修正原代码的属性错误 */
}

body {
  background-color: white;
  width: 376px;
  height: 560px;
  margin: 0 auto; /* 可选：让页面在浏览器窗口中水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 使绝对定位的国旗以body为参照 */
  overflow: hidden; /* 避免内容溢出容器 */
}

.logo img {
  width: 200px; /* 缩小尺寸适配容器宽度，原400px超出376px容器范围 */
  height: auto; /* 保持图片原始比例 */
  margin-top: 20px; /* 与顶部国旗拉开间距 */
}

.drapeau img {
  width: 30px;
  position: absolute;
  right: 10px;
  top: 5px;
}

.links-container {
  margin: auto 0; /* 利用flex布局特性实现垂直居中 */
}

.links-nav {
  list-style-type: none;
  font-family: "Arapey", sans-serif;
  font-style: italic;
}

.links-nav li {
  color: #333;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
  margin: 8px 0; /* 增加列表项间距提升可读性 */
}

关键修改说明 #

1. 修正基础属性错误：将原代码中错误的border: border-box改为box-sizing: border-box，确保元素内边距和边框不会额外撑大尺寸。
2. 固定容器尺寸：给body设置目标宽高376px×560px，作为整个页面的布局容器。
3. 用Flex布局控制整体排版：
   • 将body设为flex容器，flex-direction: column让子元素垂直排列，align-items: center实现所有子元素水平居中。
   • 给links-container设置margin: auto 0，借助flex的自动填充特性，让导航容器垂直居中于剩余空间。
4. 调整logo布局：移除logo的position: absolute，让它回到文档流中；同时缩小尺寸避免超出容器，用margin-top控制顶部间距，防止与国旗重叠。
5. 国旗定位优化：给body添加position: relative，确保绝对定位的国旗始终相对于页面容器定位，不会脱离布局范围。

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