position fixedでfixしたものを真ん中に配置する（CSS情報）

position fixedでfixしたものを真ん中に配置する、これを検索してあんまりいい記事がなかったのでこの記事を書くことにしました。

よく、headerをposition fixedで一番上に固定すること多いと思います。

fixedした中身を真ん中に持っていく、そんなコーディングあると思います。

headerとか。

positionを使うとmargin:0 autoができない。

なんて記事を見かけたので、使えますよ。という記事です。

どう書くと真ん中に持ってこれるのか？

１、親要素をfixedする。

２、親要素のwidthを100%にする。

３、真ん中に持っていきたいものにmargin:0 auto;を使う。

実際にどんなコードを書く必要があるか。

HTML

 <header class="header">
<div>この場所がmargin:0 autoで真ん中に来る。</div>
</header>

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f00;/* わかりやすく赤にしただけ*/
}

.header div {
margin: 0 auto;
max-width: 960px;
}

こんなコードをかけばいいかと思います。

いかがだったでしょうか？

参考にしてみてください。

その他のcssに関する記事はこちら