如何將一個div居中在另一個div中？-html教學-PHP中文網

首頁

web前端

html教學

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

PHPz

Sep 08, 2023 am 11:13 AM

css居中div居中

如何將一個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中文網其他相關文章！

陳述

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

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract