資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在另一個 div 內居中一個 div？
居中 div 是前端開發中最重要的方面之一。在本文中，我們將使用**HTML** 和**CSS** 將一個 div 居中在另一個 div 內。
我們將有一個父**div**，它將包含子 div。我們的任務是將子 div 放在父 div 的中心。
居中子 div 的不同方法
有多種方法可以居中子 div，在這裡我們將展示每種方法的完整程式碼。
CSS transform 和 position 屬性
要使用 CSS **transform** 和**position** 屬性居中子 div，我們需要按照以下步驟操作。
- 我們將子元素的 position 設定為 absolute，父元素設定為 relative。接下來，我們將子元素從父 div 的頂部和左側移動 50%。接下來，我們將使用 CSS 的 transform 屬性使子 div 居中。
- 現在 translate(x, y) 函式以兩個值作為其引數，其中 x 是水平移動元素的畫素數，y 是垂直移動元素的畫素數。因此，元素被移動了其寬度和高度的 -50%，使其垂直和水平居中。
示例
在以下程式碼中，我們使用了上述方法來居中子 div。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
position: relative;
}
.child {
background-color: lightgreen;
Width: 25vw;
Height: 25vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used
CSS transform, and position property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
CSS Grid 屬性
在此方法中，我們將使用 CSS **display** 和**place-items** 屬性來居中子 div，這是最常用的居中子 div 的方法之一。
- 我們將為父 div 元素設定“display: grid;”，以便該 div 可以像網格一樣工作。
- 現在，網格上的“place-items: center;”屬性將使子元素居中對齊。
示例
在以下程式碼中，我們使用了上述方法來居中子 div。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
display: grid;
place-items: center;
}
.child {
background-color: lightgreen;
width: 25vw;
height: 25vh;
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used
CSS display, and place-items property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
CSS Flex Box 屬性
另一種流行的方法是使用 CSS flexbox 屬性。Flex box 是 CSS 中廣泛使用的元素。
- 我們首先需要將父元素設定為 flexbox，為此我們將使用 CSS“display: flex;”。
- 現在，要垂直和水平居中子 div，我們將使用 CSS **align-items** 和**justify-content** 屬性。
示例
在以下程式碼中，我們使用了上述方法來居中子 div。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
.child {
background-color: lightgreen;
width: 25vw;
height: 25vh;
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used CSS display,
align-items and justify-content property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
將多個巢狀的 div 放在中心
將多個巢狀的 div 放在父 div 內也是一項簡單的任務。假設有三個 div，即 container（父 div）、first-child（container 的子元素）和 second-child（first-child 的子元素）。然後，我們可以首先使用我們討論過的方法將 first-child 居中對齊到 container div 中。接下來，我們可以將 first-child 作為 second-child 的父元素並應用相同的技術。
示例
作為說明，我們正在使用其中一種方法展示該技術。讀者應該嘗試使用其他兩種方法執行類似的任務。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: red;
width: 50vw;
height: 50vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.first-child {
background-color: green;
width: 25vw;
height: 25vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.second-child {
background-color: blue;
height: 10vh;
width: 10vw;
}
</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 屬性使用最廣泛且最方便。
6K+ 瀏覽量
