首頁 >web前端 >html教學 >如何將一個div居中在另一個div中？

如何將一個div居中在另一個div中？

PHPz轉載: 2023-09-08 11:13:021769瀏覽

如何將一個div居中在另一個div中？

簡介

div 的居中對齊是前端開發最重要的方面之一。在本文中，我們將了解使用 HTML 和 CSS 將一個 div 置於另一個 div 中的技術。

在本教程中，我們將有一個父 div，它應該具有子 div。我們的任務是將子 div 放置在父 div 的中心。

使用 Transform 翻譯和位置語法

這不是一種非常流行的將一個 div 居中對齊到另一個 div 中的方法

文法

left:50%;
top:50%;
Transform: translate(-50%, -50%);

上面的語法執行以下操作 -

CSS 規則「left:50%;」將元素的水平位置設為其容器左側的 50%。
規則「top:50%;」將元素的垂直位置設定為距其容器頂部的 50%。
規則「transform：translate(-50%, -50%);」將元素水平移動-50%，垂直移動-50%，有效地將元素的中心定位在距離其容器左側和頂部50% 的位置。

#然而，這並不是將一個 div 置於另一個 div 中心的流行方法。這是因為以下原因 -

這需要額外的五行程式碼，比其他方法多。
必須定義父級和子級 div 的位置，這可能會對以後設計其他關聯 div 帶來不便。

範例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: red;
      width:50vw;
      height:50vh;
      position: relative;
   }
   .child{
      background-color: yellow;
      Width: 25vw;
      Height: 25vh;
      position: absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

說明

在上面的範例中，我們先宣告子層級的位置是絕對的，父級的位置是相對的。接下來，我們將子級從父級 div 的頂部和左側移動了 50%。接下來，我們使用CSS的transform屬性使子div居中。
translate(x, y) 函數採用兩個值作為參數，其中 x 是水平移動元素的像素數，y 是垂直移動元素的像素數。在本例中，元素將移動其寬度的 -50% 和高度的 -50%，使其垂直和水平居中。

使用網格屬性

將 div 居中對齊的更流行的方法是使用 CSS 的 grid 屬性；然而，對於這個，首先需要將 div 宣告為網格。

文法

place-items: center;

place-items 屬性將項目與網格容器水平和垂直對齊。我們只能將該屬性與網格容器一起使用。

範例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: blue;
      width:50vw;
      height:50vh;
      display: grid;
      place-items: center;
   }
   .child{
      background-color: yellow;
      width:25vw;
      height:25vh;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

使用 Flex Box 屬性

我們可以使用的另一種方法是CSS的flexbox屬性。我們首先需要將父級聲明為彈性盒。 Flex box 是 CSS 中廣泛使用的元素。它們使用起來非常方便，因為它們是響應式元素，程式設計師通常可以很好地控制 Flexbox 屬性。

範例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: purple;
      width:50vw;
      height:30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .child{
      background-color: green;
      width:25vw;
      height:10vh;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

將多重巢狀 div 放在中心

將多個巢狀 div 放入父 div 中也是一項簡單的任務。假設有三個div，分別是container，是父親div，first-child，是容器的子div；第二個孩子是第一個孩子的孩子。然後我們可以先使用我們討論的方法將第一個子元素居中對齊到容器 div 中。接下來，我們可以將第一個孩子作為第二個孩子的父母並應用相同的技術。

作為說明，我們將使用其中一種方法來展示該技術。讀者應該嘗試使用其他兩種方法來執行類似的任務。

範例

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      background-color: red;
      width: 50vw;
      height: 30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .first-child {
      background-color: green;
      width: 25vw;
      height: 20vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .second-child {
      background-color: yellow;
      height: 10vh;
      width: 20vw;
   }
</style>
</head>
<body>
<div class="container">
   <div class="first-child">
      <div class="second-child"></div>
   </div>
</div>
</body>
</html>

結論

在本文中，我們了解如何使用 HTML 和 CSS 將其他 div 內的 div 置中對齊。我們了解了三種不同的 div 居中對齊技術。它們使用position屬性、grid屬性和flexbox屬性。其中，flexbox屬性使用最廣泛，也最方便。

以上是如何將一個div居中在另一個div中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html position transform flex

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用Node.js將視訊檔案串流傳輸到HTML5視訊播放器，以便視訊控制繼續運作下一篇：使用Node.js將視訊檔案串流傳輸到HTML5視訊播放器，以便視訊控制繼續運作

看更多