CSS を使用して固定位置の Div を中央に配置するにはどうすればよいですか?

固定位置の Div を中央に配置する

固定位置の Div を操作する場合、ページの中央に位置を揃えるのが難しい場合があります。絶対的に配置された要素に使用される従来の「ハック」は適用されません。代わりに、div の左端の隅が margin-left を無視して 50% に配置されます。

CSS3 Transform を使用した解決策

解決策は、CSS3 Transform プロパティを使用することにあります。

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

このメソッドは、transform プロパティを使用して要素を幅の半分だけ左にシフトし、効果的に要素を中心に配置します。 page.

ボーナス: 絶対に配置された要素を中央に配置する

絶対に配置された要素の場合、マージン左の「ハック」よりも優れた方法は、CSS3 フレックスボックスを使用することです:

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

これにより、絶対的に配置された要素の内容が

例

違いを示す例を次に示します。

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

「ほぼ中央の」 div はマージン左の「ハック」を使用しますが、 「centered」div は CSS3 変換プロパティを使用します。ご覧のとおり、「中央揃え」div は正確に中央に配置されています。

以上がCSS を使用して固定位置の Div を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。