如何在CSS中实现div水平居中？已尝试常见方法未奏效

方法1：修复margin: 0 auto的使用问题 #

你尝试的margin: 0 auto本身是块级元素水平居中的标准方案，没生效大概率是父容器（body）的默认样式干扰导致。调整后的完整CSS如下：

/* estilos.css */
body {
  /* 清除body默认的边距，避免挤压容器空间 */
  margin: 0;
  width: 100%;
}

.mi-div {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  /* 水平居中核心代码 */
  margin: 0 auto;
}

原理：margin: 0 auto仅对设置了固定宽度的块级元素生效，它会自动分配左右边距，让元素在父容器中水平居中。

方法2：使用Flexbox布局（推荐现代场景） #

Flexbox是更灵活的布局方案，无需依赖元素固定宽度，适配性更强：

/* estilos.css */
body {
  margin: 0;
  /* 将body设为flex容器 */
  display: flex;
  /* 主轴（水平方向）居中 */
  justify-content: center;
  /* 可选：若需要同时垂直居中，添加以下两行 */
  align-items: center;
  min-height: 100vh;
}

.mi-div {
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

原理：Flex容器的justify-content: center属性会让所有子元素在水平方向自动居中，适配各种屏幕尺寸。

方法3：使用Grid布局 #

Grid布局同样能快速实现元素居中，代码更简洁：

/* estilos.css */
body {
  margin: 0;
  display: grid;
  /* 水平居中 */
  justify-content: center;
  /* 可选：同时垂直居中用 place-items: center; */
  min-height: 100vh;
}

.mi-div {
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

为什么text-align: center没生效？ #

text-align: center的作用是居中元素内部的行内/行内块元素（比如你div里的p标签文字），无法直接让块级div本身水平居中，这就是该方法对你无效的原因。

内容的提问来源于stack exchange，提问作者Maria Graciela Esquivel Fernan