css - 除非我将标题的宽度设置为 100%，否则固定位置抛出我的标题居中为什么？

Question

假设我有一个标题:

header {
     background-color: $main-background-color;
     height: 86px;

            #headerContent {
               background-color: $main-background-color;
               height:86px;
               margin:0px auto 0px auto;
               width: $site-width;
            }
}

当用户登录时，标题设置更改为:

header {
    background-color: $main-background-color;
    position:fixed; 
    width:100%;
    height: 40px;

        #headerContent {
            position:relative;
            background-color: $main-background-color;
            width: $site-width;
            margin:0px auto 0px auto;
            height:40px;
                img {
                    margin-top:12px;
                }
        }

}

我想知道的是，如果将页眉宽度设置为自动，为什么我的所有居中都会出错？我只能使用 %。这是用浏览器来判断100%是多少？当我使用 auto 时，标题似乎消失了，我只能看到我的 headercontent div，然后它被移到了页面的左侧。

我现在可以使用它了，但只是想了解发生了什么。

亲切的问候

Answer 1

Position fixed & absolute 默认取内容width & height。这就是为什么当您定义 auto 时，它的内容是 width。最好为此定义 left 和 right 而不是 width:100% 。像这样:

header{
 right:0;
 left:0;
 position:fixed;
}