数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
