css中div居中的方法 |css做抛物线

在CSS中，将div居中是一个常见的需求。有多种方法可以实现这个目标，下面就让大家一一了解。 一、文本居中 最基本的方法是使用text-align属性将文本居中。在父级元素中设置text-align: center，就可以实现子元素div水平居中。

.parent {
text-align: center;
}
.child {
display: inline-block;
}

二、绝对定位 利用绝对定位可以在父级元素中垂直和水平居中子元素div。首先在父元素中设置position: relative，然后在子元素中设置position: absolute，并使用top和left属性来将其居中。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

三、弹性盒子 使用弹性盒子可以轻松地将多个子元素居中。大家只需在父级元素中设置display: flex和justify-content、align-items属性。

.parent {
display: flex;
justify-content: center;
align-items: center;
}

四、网格布局 在CSS3中，出现了网格布局，它可以使页面排版更加灵活、高效。在父级元素中设置display: grid，并使用justify-content、align-items属性居中子元素div。

.parent {
display: grid;
justify-content: center;
align-items: center;
}

以上就是几种常见的将div居中的方法。开发人员可以根据自己的需求和项目来选择适当的方法。