如何在另一个 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。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Grid 属性

在此方法中，我们将使用 CSS **display** 和**place-items** 属性来居中子 div，这是最常用的居中子 div 的方法之一。

  • 我们将为父 div 元素设置“display: grid;”，以便该 div 可以像网格一样工作。
  • 现在，网格上的“place-items: center;”属性将使子元素居中对齐。

示例

在以下代码中，我们使用了上述方法来居中子 div。

Open Compiler
<!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。

Open Compiler
<!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 的父元素并应用相同的技术。

示例

作为说明，我们正在使用其中一种方法展示该技术。读者应该尝试使用其他两种方法执行类似的任务。

Open Compiler
<!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 属性使用最广泛且最方便。

更新时间： 2024年6月26日

6K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告