HTMLとCSSで中央揃えする方法:center div absolute

2024-02-16 23:01 HTML CSS 中央揃え

  1. flexboxを使用する方法:

    <div class="container">
 <div class="centered-div">
   <!-- 中央に揃えたいコンテンツ -->
 </div>
</div>
    .container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

  2. absoluteとtransformを使用する方法:

    <div class="container">
 <div class="centered-div">
   <!-- 中央に揃えたいコンテンツ -->
 </div>
</div>
    .container {
 position: relative;
 height: 100vh;
}
.centered-div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

  3. gridを使用する方法:

    <div class="container">
 <div class="centered-div">
   <!-- 中央に揃えたいコンテンツ -->
 </div>
</div>
    .container {
 display: grid;
 place-items: center;
 height: 100vh;
}

これらはいくつかの一般的な方法ですが、実際にはさまざまな方法があります。具体的な要件やコンテキストによっても最適な方法が異なる場合があります。選択した方法がウェブサイトのデザインやレイアウトに適しているかどうかを確認するために、試行錯誤しながら実装してみてください。