网站div居中布局问题：页面缩放时元素位置偏移求助

我正在开发一个网站，希望将所有div元素置于页面中部。参考网络代码实现后，发现放大或缩小页面时所有元素位置会偏移，但Stack Overflow网站缩放时元素位置保持稳定。以下是我使用的代码：

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
}

.container{
    background-color: rgb(255, 255, 255);
    height: 100vh;
    background-size: 100% 100%;
}

.container .navbar{
    width: 50%;
    height: 150px;
    margin-left:500px;
}

.navbar ul{
    border: 5px;
    background-color: rgb(70, 68, 63);
}

.navbar ul li{
    list-style:none;
    display:inline-block;
    margin:0 8px;
    line-height: 80px;
}

.navbar ul li a{
    color: rgb(73, 255, 255);
    text-decoration: none;
    font-size: 30px;
    padding: 6px 13px;
    font-family:Roboto;
    transition: 2s;
    margin-left: 135px;
}

.navbar ul li a:hover{
    background-color: rgb(167, 167, 167);
}

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="üi.css">
    <title>Tech</title>
</head>
<body>
    <div class="container" >
        <div class="navbar">
            <img src="C:\Users\****\OneDrive\Masaüstü\tech\img\Tech.png">
            <ul>
                <li><a href="index.html">Ana Sayfa</a></li>
                <li><a href="ürünler.html">Ürünler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>            
        </div>

你的问题出在使用了固定像素值的margin（margin-left:500px），这种绝对单位在页面缩放、不同尺寸屏幕下会直接导致元素位置偏移。要实现像Stack Overflow那样稳定的居中效果，推荐以下两种方案：

方案1：用margin:auto实现水平居中 #

修改.container .navbar的样式，移除固定的margin-left，改用自动边距实现自适应居中：

.container .navbar{
    width: 50%;
    height: 150px;
    /* 删掉margin-left:500px */
    margin: 0 auto; /* 左右自动分配边距，实现水平居中 */
}

方案2：Flexbox布局（适配性更强） #

给父容器.container添加Flex属性，让子元素自动居中，这种方式能更好地适配各种屏幕尺寸：

.container{
    background-color: rgb(255, 255, 255);
    height: 100vh;
    background-size: 100% 100%;
    display: flex; /* 启用Flex布局 */
    justify-content: center; /* 水平方向居中 */
    align-items: flex-start; /* 垂直方向顶部对齐，可按需调整 */
}

.container .navbar{
    width: 50%;
    height: 150px;
    /* 删掉margin-left:500px */
}

额外优化：导航链接的自适应分布 #

你给导航链接设置的margin-left:135px也是固定像素，缩放时同样会错位。可以改用Flex布局让链接均匀分布：

.navbar ul{
    border: 5px;
    background-color: rgb(70, 68, 63);
    display: flex;
    justify-content: space-around; /* 子元素均匀分布在容器内 */
    align-items: center;
    height: 80px; /* 固定高度配合align-items垂直居中 */
}

.navbar ul li{
    list-style:none;
    margin:0 8px;
    /* 删掉line-height:80px */
}

.navbar ul li a{
    color: rgb(73, 255, 255);
    text-decoration: none;
    font-size: 30px;
    padding: 6px 13px;
    font-family:Roboto;
    transition: 2s;
    /* 删掉margin-left:135px */
}

内容的提问来源于stack exchange，提问作者Selim Yıldız