无法在黄色div内水平居中绿色div？已尝试多种方法未果

问题根源 #

1. 父容器未设置相对定位：黄色的#sidebar div没有添加position: relative，导致绿色的绝对定位元素会以页面中更高层级的定位元素（比如body）为基准，而非黄色容器，自然无法在黄色div内居中。
2. 绝对定位元素居中条件不全：仅给绿色div加margin: auto不够，必须同时设置left: 0和right: 0，让浏览器自动分配左右边距，才能实现水平居中。
3. 标签闭合错误：页面底部灰色div的标签未正确闭合（<div>没有对应</div>），可能干扰浏览器正常渲染布局。

修改后的代码 #

<!doctype html>
<html>
<head>
    <title>Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
    </style>
</head>
<body>
    <div style="width:100vw;height:100vh">
        <div style="height:47px; width:100%; position: absolute;  z-index:2">
            <div class="w3-bar" style="background-color: #2f4f4f; ">
            </div>
        </div>
        <div class="w3-row" style="height:100%; width:100%; position: fixed; ">
            <!-- 给黄色容器添加position: relative -->
            <div class="w3-col w3-animate-left w3-collapse " style="height:100%; width:296px; z-index:1; background-color: yellow; position: relative;" id="sidebar">
                <!-- 添加left:0和right:0，配合margin:auto实现水平居中 -->
                <div style="position: absolute; top: 47px; left:0; right:0; width:280px; height:500px; margin: auto; background-color: green">
                </div>
            </div>
            <div class="w3-rest " style="height:100%; ">
                <div style="height:97%; background-color: blue">
                </div>
                <!-- 修复标签闭合问题 -->
                <div style="height:3%; width:100%; background-color: gray">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

替代方案（W3 CSS内置类） #

如果不想用绝对定位，也可以直接利用W3 CSS的类简化实现：

• 给黄色容器添加w3-display-container类
• 给绿色div添加w3-display-middle类，即可快速实现黄色容器内的水平+垂直居中；若仅需水平居中，给绿色div加w3-center类即可（需保证绿色div是块级元素）。

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