如何将子div居中放置于父div容器内 尝试margin:auto等方法无效求解

失效原因说明 #

• text-align: center 仅对行内、行内块级元素生效，你代码中的content-container、example-list均为块级元素，默认占满父容器宽度，因此该属性无法生效
• margin: auto 不生效的核心原因是未给需要居中的块级元素设置明确宽度，元素宽度默认100%撑满父容器，无法体现居中效果

可行方案 #

方案1：Flex布局（最通用，无需提前知道子元素宽度） #

如果需要父容器.container下的所有子元素都居中，直接给父容器添加如下样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 若需要垂直方向也居中，可额外添加 justify-content: center; 配合父容器高度设置使用 */
}

如果只需要content-container内部内容居中，单独给该容器添加样式即可：

.content-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

方案2：固定宽度场景用margin: auto #

如果你的example-list可以设置固定宽度（或百分比宽度），直接给该元素添加样式即可：

.example-list {
  width: 80%; /* 也可设置为固定像素值，比如600px */
  margin: 0 auto;
}

方案3：Grid布局 #

给父容器添加如下样式可快速实现子元素居中：

.container {
  display: grid;
  place-items: center;
}

内容的提问来源于stack exchange，提问作者Random Name