CSS设置div宽度后容器靠左无法居中该怎么解决？

justify-content: center是flex布局容器的专属属性，仅作用于设置了display: flex的父元素，用来控制其内部子元素的对齐规则，你直接给作为子元素的.big_container添加该属性自然不会生效。

方案1：定宽块级元素水平居中（最适配当前场景） #

你已经给.big_container设置了固定宽度500px，仅需要给它新增左右外边距自动平分的规则即可实现水平居中，修改CSS代码如下：

.big_container {
  width: 500px;
  margin: 0 auto; /* 新增该行，左右margin自动计算平分剩余空间 */
}

方案2：给父元素设置flex布局 #

如果你后续有更复杂的对齐需求，也可以给.big_container的父元素body设置为flex容器，修改CSS代码如下：

body {
  display: flex;
  flex-direction: column;
  align-items: center; /* 控制子元素水平居中 */
}

你当前的HTML代码存在语法错误：<h1>属于页面内容元素，不应该放在<head>标签内，需要挪到<body>标签的最开头，避免浏览器渲染出现异常。

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