「position: absolute」で要素を画面中央に配置する方法 ～ボタン、画像、ビデオをレスポンシブに対応させる～

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。HTML,CSSでwebページを模倣してみた時、レスポンシブデザインでビデオが画面の中央に配置出来ませんでした。そこで今回は、CSSのposition: absoluteやtransformを使用して、要素を中央に配置する方法を、まとめてみました。

CSSの基本的な使い方について

まず、中央に要素を配置するために使用する主なプロパティを理解しました。

• position: absolute: 要素をその親要素内で絶対位置に配置します。
• left: 50%; top: 50%: 要素の左上を親要素の中央に配置します。
• transform: translate(-50%, -50%): 要素自体の幅と高さの半分だけずらし、正確に中央に表示します。

これらを組み合わせることで、要素を親コンテナの中央に配置することができます。

コード例

.centered-element {
    position: absolute;
    left: 50%
    top: 50%
    transform: translate(-50%, -50%);
}

使用例

1. ボタンを中央に配置する
ボタンを画面中央に配置する例です。

<div class = "button-container">
    <button class = "centered-button"> Click </button>
</div>

.button-container {
    position: relative;
    width: 100%;
    height: 400px;
}

.centered-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
}

この例では、button-containerが親要素として使われ、ボタンがその中央に配置されます。
centered-butoonにCSSを追加する前

centered-butoonにCSSを追加した後

2. 図（画像やSVG）を中央に配置する
画像を中央に配置する例です。

<div class = "button-container">
    <button class = "centered-button"> Click </button>
</div>

<div class="image-container">
  <img src="example-image.jpg" class="centered-image" alt="Example Image">
</div>

.image-container {
  position: relative;
  width: 100%;
  height: 400px;
}

.centered-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
}

このコードで、画像が親要素の中央に配置され、モバイルでもPCでも適切に表示されます。
centered-imageにCSSを追加する前

centered-imageにCSSを追加した後

3. ビデオを中央に配置する
レスポンシブ対応のビデオを中央に配置する例です。

<div class="video-container">
  <video src="12268480_360_640_60fps.mp4" autoplay muted loop></video>
</div>

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9のアスペクト比を維持 */
}

.video-container video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

このコードでは、ビデオが中央に表示され、アスペクト比も保たれます。
video-containerにCSSを追加する前

video-containerにCSSを追加した後

4.メディアクエリを使ったPC表示対応

@media (min-width: 1024px) {
  .video-container {
    width: 80%;
    margin: 0 auto;
  }
}

これにより、画面サイズが大きい場合でも中央に表示されます。

5.メディアクエリを使ったSP表示対応

@media screen and (max-width: 768px) {
  .video-container {
    width: 100%;
    margin: 0 auto;
  }
}

これにより、SPでもビデオの中央から全体が表示されます。

最後までご覧いただき本当にありがとうございました！！