如何使用 CSS 將 div 元素在所有瀏覽器中垂直居中？

要使用 CSS 將 div 元素 在所有 瀏覽器 中垂直居中，可以使用 Flexbox。 CSS3 提供了另一種佈局模式彈性盒，通常稱為 Flexbox。使用此模式，您可以輕鬆建立複雜應用程式和網頁的佈局。與浮動不同，Flexbox 佈局可以完全控制盒子的方向、對齊方式、順序和大小。

<div> 標籤是 HTML 中元素的容器。我們可以在 div 中放置任何型別的內容。首先新增元素，然後使用 CSS 對其進行樣式設定。我們現在只能垂直居中 div，但也可以水平居中。

要垂直居中 div，我們將使用 flex 屬性和 align-items 屬性。將值設定為 center 以將 div 居中。在下面的示例中，我們已將其中一個 div 設定為使用 align-items 屬性（值為 center）進行居中對齊 -

demo2 {
   display: flex;
   align-items: center;
   height: 60%;
}

然後在相同的 div demo2 中設定內容以進行居中對齊 -

<div class="demo2">
   <img src="https://tutorialspoint.tw/archery/images/archery-mini-logo.jpg" alt="Archery Tutorial">
   <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a bow and hit a fixed target.</p>
</div>

示例

現在讓我們看看使用 CSS 將 div 元素在所有瀏覽器中垂直居中的示例 -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center Div Elements</title>
</head>
<style>
   body,
   html {
      height: 100%;
   }
   .demo2 {
      display: flex;
      align-items: center;
      height: 60%;
   }
   .demo1,
   .demo2 {
      border: 2px solid skyblue;
      background-color: blue;
      color: white;
   }
</style>
<body>
   <h1>Archery Tutorial</h1>
   <div class="demo1">
      <img src="https://tutorialspoint.tw/archery/images/archery-mini-logo.jpg"
      alt="Archery Tutorial">
      <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
      bow and hit a fixed target.</p>
   </div>
   <p>Let us now center the div elements: </p>
   <div class="demo2">
      <img src="https://tutorialspoint.tw/archery/images/archery-mini-logo.jpg"
      alt="Archery Tutorial">
      <p>Archery is a bow and arrow game where each player is supposed to shoot arrows from a
      bow and hit a fixed target.</p>
   </div>
</body>
</html>

更新於: 2023-11-21

867 次瀏覽

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告