如何使用 CSS 将子元素置于父元素的中心？

在

中将元素居中

使用 CSS 以 left: 50%; 居中元素时，对齐方式是相对于整个窗口的。但是，当将元素在父

中居中时，我们希望对齐方式相对于其包含元素。

解决方案

要实现此目的，我们可以使用文本组合-对齐：居中；和保证金：自动； CSS 属性。

第 1 步：对齐父级

Center

设置文本对齐：居中；到父级

;元素。这会将其所有子元素居中。

第 2 步：使用边距将特定子元素居中

一旦父元素

对齐后，我们需要将特定的子元素居中。应用保证金：自动；到子元素。无论子元素的宽度如何，这都会自动使元素在父

内居中。

为了清楚起见，这里有一个示例：

#parent {
  text-align: center;
  background-color: blue;
  height: 400px;
  width: 600px;
}

.child {
  height: 100px;
  width: 200px;
  text-align: left;
}

.center {
  margin: auto;
  background-color: green;
}

以上是如何使用 CSS 将子元素置于父元素的中心？的详细内容。更多信息请关注PHP中文网其他相关文章！