使用display:flex和justify-content:center设置居中div的宽度

嘿，我太懂这种明明按思路写代码却出问题的挫败感了！咱们来拆解一下你遇到的问题：

问题根源：可能搞反了Flex布局的应用对象 #

你提到用display:flex和justify-content:center实现div居中，但如果把这两个属性直接加在要居中的div本身上，就会出问题——这样这个div变成了flex容器，它的子元素会被居中，但div自己作为块级元素，默认宽度还是父容器的100%，导致你设置的width:800px没起到预期效果。

正确的做法：给父容器加Flex布局 #

要让div在页面水平居中，应该把Flex属性应用到它的父容器（比如body）上，然后给目标div设置固定宽度：

/* 父容器（比如body）设置Flex布局，实现子元素水平居中 */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  /* 新增Flex相关属性 */
  display: flex;
  justify-content: center;
  /* 如果需要垂直居中，可以再加以下两行 */
  /* min-height: 100vh; */
  /* align-items: center; */
}

/* 要居中的div设置固定宽度 */
.your-target-div {
  width: 800px;
  /* 可选：加背景色方便验证效果 */
  background-color: #f5f5f5;
}

如果父容器已是Flex，但div宽度仍被拉伸？ #

如果父容器已经设置了display:flex，但div宽度还是变成100%，可以检查这两个点：

• 是否不小心给div设置了flex:1或继承了width:100%的样式
• 给div加上flex-shrink: 0，防止它被父容器压缩（默认flex-shrink:1会让子元素自适应父容器宽度）

另外，也可以用max-width:800px替代固定width，这样在小屏幕上div会自适应缩小，更适配移动端：

.your-target-div {
  max-width: 800px;
  width: 100%;
}

快速排查小技巧 #

打开浏览器开发者工具（F12）查看目标div的计算样式，能快速找到哪个样式在影响宽度，帮你定位冲突。

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