如何在保持display:block的前提下，窄屏时水平居中acBox类DIV

以下几种方案都能满足需求，既让窄屏时单个acBox水平居中，又保持display:block方便JS直接控制显隐：

方案1：margin:auto + 取消浮动/inline-block #

这是最传统的兼容方案，适合不使用现代布局的场景：

/* 默认宽屏样式 */
.acBox {
  display: block;
  float: left; /* 或者inline-block，根据你原来的布局选择 */
  width: 200px; /* 宽屏时的固定宽度 */
  margin: 0 10px 10px 0; /* 可选的间距 */
}

/* 窄屏媒体查询 */
@media (max-width: 1000px) {
  .acBox {
    float: none; /* 取消浮动，让元素独占一行 */
    width: 200px; /* 保持和宽屏一致的宽度 */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; /* 调整上下间距 */
  }
}

原理：窄屏时取消浮动后，acBox成为块级元素，设置左右margin为auto会让它在容器中水平居中，全程保持display:block，JS直接用element.style.display = "block"/"none"控制即可。

方案2：Flexbox布局（推荐） #

Flexbox是现代布局首选，代码更简洁，适配性更好：

/* 容器样式 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 替代margin的间距，更方便 */
  justify-content: flex-start; /* 宽屏时左对齐排列 */
}

/* acBox默认样式 */
.acBox {
  display: block;
  width: 200px;
}

/* 窄屏媒体查询 */
@media (max-width: 1000px) {
  .container {
    justify-content: center; /* 窄屏时子元素居中 */
  }
}

原理：宽屏时flex-wrap:wrap让acBox自动换行排列；窄屏时justify-content:center会让每行的单个元素居中。acBox始终保持display:block（Flex子项默认是flex，但设置为block也不会影响布局），JS控制显隐完全不受屏幕分辨率影响。

方案3：Grid布局 #

如果需要更精细的网格控制，Grid也是不错的选择：

.container {
  display: grid;
  gap: 10px;
  /* 宽屏时自动填充最多的列，每列200px */
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: start;
}

.acBox {
  display: block;
}

@media (max-width: 1000px) {
  .container {
    grid-template-columns: 200px; /* 窄屏时仅一列 */
    justify-content: center; /* 列居中 */
  }
}

原理：窄屏时网格只有一列，justify-content:center让这一列居中，从而acBox也居中；宽屏时自动生成多列排列。同样保持display:block，JS控制无压力。

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