最新版！insetプロパティでposition: fixed要素を中央に配置する方法
2024-04-02
CSSで position: fixed 要素を中央に配置する方法
inset: 0; と margin: auto; を使う
これは最もシンプルで現代的な方法です。
.element {
position: fixed;
inset: 0;
margin: auto;
}
inset: 0;は、要素のすべての辺から親要素の余白まで0にします。margin: auto;は、左右の余白を自動的に設定し、要素を水平方向の中央に配置します。
この方法は、すべてのブラウザで動作します。
top: 50%; と left: 50%; を使う
従来の方法です。
.element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
top: 50%;は、要素の上端を親要素の上端から50%の位置に配置します。transform: translate(-50%, -50%);は、要素を左上方向に50%移動し、中央に配置します。
この方法は、古いブラウザでも動作しますが、inset プロパティよりもパフォーマンスが劣る場合があります。
calc() を使って、要素の幅と高さの半分を計算し、それを top と left プロパティに設定することができます。
.element {
position: fixed;
top: calc(50% - var(--element-height) / 2);
left: calc(50% - var(--element-width) / 2);
}
var(--element-height)は、要素の高さの変数です。
この方法は、要素のサイズが変化しても中央に配置し続けることができます。
Flexbox を使って、要素を水平方向と垂直方向の中央に配置することができます。
.container {
display: flex;
justify-content: center;
align-items: center;
}
.element {
position: fixed;
}
display: flex;は、コンテナをフレックスレイアウトにします。justify-content: center;は、コンテナ内の要素を水平方向の中央に配置します。
どの方法を使うかは、プロジェクトの要件とブラウザのサポート状況によって異なります。
- シンプルで現代的な方法を求めている場合は、
inset: 0;とmargin: auto;を使う方法がおすすめです。 - 古いブラウザでも動作する必要がある場合は、
top: 50%;とleft: 50%;を使う方法を使うことができます。 - 要素のサイズが変化しても中央に配置し続ける必要がある場合は、
calc()を使う方法か、Flexbox を使う方法を使うことができます。
position: fixed要素は、スクロールしても画面上に固定されます。z-indexプロパティを使って、position: fixed要素の重なり順序を指定することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a position:fixed element</title>
</head>
<body>
<div class="container">
<div class="element">
<h1>中央に配置された要素</h1>
</div>
</div>
</body>
</html>
.container {
width: 100vw;
height: 100vh;
}
.element {
/* 1. `inset: 0;` と `margin: auto;` を使う */
position: fixed;
inset: 0;
margin: auto;
/* 2. `top: 50%;` と `left: 50%;` を使う */
/* position: fixed; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
/* 3. `calc()` を使う */
/* position: fixed; */
/* top: calc(50% - var(--element-height) / 2); */
/* left: calc(50% - var(--element-width) / 2); */
/* 4. Flexboxを使う */
/* position: fixed; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
width: 300px;
height: 200px;
background-color: #ccc;
}
実行方法
- 上記コードをHTMLファイルとCSSファイルに保存します。
- HTMLファイルをブラウザで開きます。
結果
ブラウザで開くと、画面中央に要素が表示されます。
- 上記コードは、基本的な例です。必要に応じて、コードをカスタマイズしてください。
CSSで position: fixed 要素を中央に配置する方法
JavaScriptを使って、要素の座標を計算し、中央に配置することができます。
const element = document.querySelector('.element');
const centerElement = () => {
const { top, left, width, height } = element.getBoundingClientRect();
const scrollTop = window.pageYOffset;
const scrollLeft = window.pageXOffset;
element.style.top = `${scrollTop + (window.innerHeight - height) / 2}px`;
element.style.left = `${scrollLeft + (window.innerWidth - width) / 2}px`;
};
window.addEventListener('resize', centerElement);
window.addEventListener('scroll', centerElement);
centerElement();
.container {
display: grid;
place-items: center;
}
.element {
position: fixed;
}
position: absolute と transform: translate を使って、要素を中央に配置することができます。
.container {
position: relative;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
この方法は、親要素が position: relative に設定されている必要があります。
- 要素のサイズが変化しても中央に配置し続ける必要がある場合は、
calc()を使う方法、JavaScript を使う方法、CSS Grid を使う方法、position: absoluteとtransform: translateを使う方法を使うことができます。
css css-position centering
