网页布局技术求助：Logo与盒子居中及边框尺寸统一问题

嘿，我来帮你搞定这两个头疼的问题！咱们一步步来拆解解决：

问题1：Logo和Box容器无法居中 #

问题分析 #

你已经用flex搞定了菜单居中，但Logo和Box的居中没生效，主要是这两个点：

• .logo 容器虽然加了 margin: auto，但它的父元素（body）没有提供合适的布局上下文，导致水平居中失效；另外容器内的图片也没做居中处理。
• .box 只设置了 margin-top: auto，缺少左右方向的自动外边距，自然没法水平居中。

修复方案 #

给 body 重置默认边距，然后调整 .logo 和 .box 的样式，确保它们能水平居中：

body {
  margin: 0;
  padding: 0;
}

.logo {
  display: flex;
  justify-content: center; /* 让内部图片水平居中 */
  margin: 0 auto; /* 让Logo容器本身水平居中 */
  padding: 50px;
}

.box {
  display: flex;
  width: 800px;
  height: 500px;
  border: 1px solid gray;
  margin: 60px auto 0; /* 顶部留60px间距，左右自动居中 */
  justify-content: center;
  align-items: center; /* 让内部的main_box在Box里居中 */
}

问题2：菜单与Box边框尺寸不一致 #

问题分析 #

菜单的每个 .menu-item 都加了独立边框，相邻item的边框会重叠，看起来比Box的边框粗；另外菜单的 height 和 padding 没有用 box-sizing 约束，可能导致实际尺寸超出预期，和Box的边框视觉上不统一。

修复方案 #

1. 让菜单容器先居中，避免和Box的边框错位；
2. 给菜单item去掉重复的右边框，最后一个item再补上，避免边框重叠；
3. 加上 box-sizing: border-box，让padding和边框都包含在元素尺寸内，保证尺寸准确。

修改后的菜单相关样式：

.nav {
  display: flex;
  justify-content: center; /* 让整个菜单容器水平居中 */
}

.menu-item {
  width: 100px;
  height: 30px;
  border: 1px solid gray;
  border-right: none; /* 去掉右边框，避免相邻item边框重叠 */
  text-align: center;
  padding: 10px;
  padding-left: 100px;
  padding-right: 100px;
  box-sizing: border-box; /* 约束尺寸计算范围 */
}

/* 给最后一个菜单item补上右边框 */
.menu-item:last-child {
  border-right: 1px solid gray;
}

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
.logo { 
  display: flex; 
  justify-content: center;
  margin: 0 auto; 
  padding: 50px; 
}
.nav { 
  display: flex; 
  justify-content: center;
}
.menu-item { 
  width: 100px; 
  height: 30px; 
  border: 1px solid gray;
  border-right: none;
  text-align: center; 
  padding: 10px; 
  padding-left: 100px; 
  padding-right: 100px;
  box-sizing: border-box;
}
.menu-item:last-child {
  border-right: 1px solid gray;
}
a { 
  text-decoration: none; 
  color: black; 
}
.main { 
  margin: 0; 
  margin-top: 60px; 
}
.box { 
  display: flex; 
  width: 800px; 
  height: 500px; 
  border: 1px solid gray; 
  margin: 60px auto 0;
  justify-content: center;
  align-items: center;
  text-align: center; 
}
.main_box { 
  display: flex; 
  width: 750px; 
  height: 450px; 
  border: 1px solid black; 
  padding: 10px; 
  margin: auto; 
  text-align: center; 
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="logo">
<a href="index.html"><img src="imgs/logo2.png" alt="Logo" /></a>
</div>
<div class="nav">
<div class="menus">
<a href="intro.html"><div class="menu-item">About Me</div></a>
<div class="menu-item">My Language</div>
<div class="menu-item">Photos</div>
<div class="menu-item">Login</div>
</div>
</div>
<div class="box">
<div class="main_box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

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