问题如题所示，容器内的三个div本该水平居中，两旁有28.5/40rem的margin但是没有生效，先是百度了一下，但是相关的原因都是和浏览器默认字体最小是12px有关，但是我设置的明显是大于这个值的，所以没能找出问题所在。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
<title>爱学习</title>
</head>
<body>
<!-- 创建头部的容器 -->
<header class="top-bar">
<div class="menu-btn">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<h1 class="logo">
<a href="#">
爱学习
</a>
</h1>
<div class="search-btn">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</header>
</body>
</html>
css代码如下：
* {
margin: 0;
padding: 0;
}
.w,
.top-bar {
width: 693/40rem;
margin: 0 auto;
}
html {
font-size: 100vw/750 * 40;
background-color: #eff0f4;
}
.top-bar {
display: flex;
height: 175/40rem;
line-height: 175/40rem;
}
