css - CSS: "position:fixed" を持つヘッダーを水平方向に中央揃えにする方法はありますか?

Question

#header-containeroneと oneの 2 つの div コンテナーで作成されたヘッダーがあり#headerます。

#header_container { 
background:#eeeeee; 
border:0px hidden; 
height:100px; 
position:fixed; 
width:1000px; 
top:0; 
margin: auto; 
display: block;
}
#header { 
line-height:60px; 
margin:0 auto; 
display:block; 
width:940px; 
text-align:center;
}

もちろん、「固定」と「中央」の両方を持つことはできないので、「固定」プロパティを維持しながらヘッダーを中央に配置するにはどうすればよいですか?

ありがとう！

Answer 1

「左: 50%;余白-左: -500px;」を追加すると、#header-container に、中央に配置します。margin-left を margin: auto; の後ろに配置することを忘れないでください。

したがって、コードは次のようになります。

#header_container{
background: #eeeeee;
border: 0px hidden; 
height: 100px;
position: fixed;
width: 1000px;
top:0;
left: 50%;
margin-left: -500px;
display:block;
}

#header{
line-height: 60px;
margin: 0 auto;
display: block;
width: 940px;
text-align:center;
}