使用 CSS 绝对定位居中 Div

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 绝对定位居中 Div

作者：迹忆客最近更新：2023/04/27 浏览次数：

CSS（级联样式表）用于定义 HTML 元素的样式以及它们在适应不同设备和屏幕尺寸时应如何显示。使用 CSS 可以节省大量工作，因为它可以一次控制多个页面的布局。

让我们看看它如何使用 absolute 属性使 div 类中的元素居中。

使用 CSS 居中元素

如果我们想要将任何文本、图像、框或元素组居中，我们必须将它们垂直和水平放置。尽管水平和垂直定位的居中看起来很简单，但我们必须遵循的步骤有些棘手。

我们可以使用 text-align: center; 带内联和边距：0 auto；使用块元素将元素水平居中。使用 CSS 中的 absolute 属性，我们还可以将一个元素或一组元素垂直居中，水平居中，或者垂直和水平居中。

使用 absolute 属性

除非我们指定元素存在的位置，否则它们默认保持静态。 top 、left 、right 和 bottom 属性不适用于此。

因此，static 中的 HTML 元素是非定位的，并且显示为它们在标记语言中的样子。但是有了绝对属性，元素的定位和行为就好像它们不存在一样。

绝对定位元素的空间从它那里拿走并分配给另一个，而绝对定位元素自己占用空间。

假设我们的 HTML 代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Center an Absolute div</title>
</head>
<body>
    <div class="container">
        <div class="green-box"></div>
        <div class="blue-box"></div>
    </div>
</body>
</html>

如上面的代码片段中，它提到了文档类型是html并且在开头同时打开了 <html> 和 <head> 。之后，它定义了允许访问不同字符的元字符集。

然后使用 href 将名为 style 的 CSS 文件链接到当前 HTML 文件，并在 <title> 中显示一个标题 Center an Absolute div。接下来，我们必须在关闭 <head> 之后打开一次 <body>。

在 <body> 中，打开了一个名为 container 的 div 类，并创建了另外两个 green-box 和 blue-box。在最后一部分，<div> 、<body> 和 <html> 标记是结束序列。

样式.css代码：

.container {
    margin: 50px;
    display: flex;
    border: 4px solid green;
    padding: 50px;
    width: 400px;
}

.orange-box,.purple-box {
    width: 100px;
    height: 100px;
}

.orange-box {
    background-color: orange;
}

.purple-box {
    background-color: purple;
}

上面的代码片段是style.css里面的代码。

首先，我们创建了一个带有定义属性的绿色边框容器。接下来，我们构建了两个宽度和高度为 100px 的橙色和紫色盒子。

输出：

CSS Center an Absolute Div - Output 1

在 style.css 文件中自定义框内的属性，我们可以将它们水平居中、垂直居中或水平和垂直居中。

为了清楚起见，让我们只自定义紫色框。为了使元素居中，您可以根据下面提到的用例修改上面的代码。

使用 absolute 属性水平居中元素

示例代码：

.purple-box {
    background-color: purple;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

输出:

CSS Center an Absolute Div - Output 2

根据上面的代码片段，我们使用 absolute 属性定位了紫色框，而 left 和 right 的值为 0。此外，上边距和下边距均为 0，而左右边距均为 auto。

因此，它需要一个对象宽度的自动边距。

正如我们在输出中看到的那样，紫色框使用绝对位置属性水平居中。

使用 absolute 属性垂直居中元素

示例代码：

.purple-box {
    background-color: purple;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

输出:

CSS Center an Absolute Div - Output 3

通过上面的代码片段，我们使用 position 中的 absolute 属性将紫色框设置为垂直居中，并将顶部和底部的值设置为 0。此外，将顶部和底部的边距值设置为 auto，而边距左侧和右侧的值为 0。

按照上面的代码自定义紫色框后，我们可以使用上面输出中显示的 absolute 属性将其垂直居中放置。

使用 absolute 属性水平和垂直居中元素

示例代码：

.purple-box {
    background-color: purple;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

输出:

CSS Center an Absolute Div - Output 4

该方法是上述方法的集合。为了使紫色框水平和垂直居中，我们在将位置设置为绝对位置后将右、左、上和下的值设置为 0。

然后我们将 auto 指定为顶部、底部、左侧和右侧的边距值。

采用上述方法，我们可以将紫色框相对于页面垂直和水平居中。但是在这里，我们使用的是容器。

如果我们想要将适合绿色边框容器的紫色框居中，我们必须如下定义容器属性中的相对位置。

示例代码：

.container {
    margin: 50px;
    display: flex;
    border: 4px solid green;
    padding: 50px;
    width: 400px;
    position: relative;
}

输出:

CSS Center an Absolute Div - Output 5

以上三个实例是元素居中的主要三个实例，我们在每个实例中都定义了紫色框的宽度。

除此之外，如果宽度未知，我们可以使用具有相对比例的 transform 方法，使用它在响应性和灵活性方面表现最好，而不是指定宽度值。

transform: translate(-50%, -50%);

CSS Center an Absolute Div - Output 6

transform: translate(-50%, 0);

CSS Center an Absolute Div - Output 7

transform: translate(0, -50%);

CSS Center an Absolute Div - Output 8

在这种方法中，translate 函数中的左侧刻度与 x 轴对应，而另一个刻度与 y 轴对应。根据比例，元素是响应式的。

总结

使用绝对属性，我们可以调整块的大小并根据百分比进行响应。在整篇文章中，我们通过示例讨论了元素水平居中、垂直居中以及水平和垂直居中。

与静态元素不同，绝对定位元素不尊重我们声明它们的容器。但是对于相对定位的元素，绝对定位的元素有一个带有 margin 和 top 、bottom 、left 和 right 属性的边界。

如果宽度未定义，则 transform 方法会增加灵活性和响应能力。

上一篇：在 CSS 中居中一个按钮

下一篇：CSS 使用浮动居中元素

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享