未知类名时如何水平居中div并使内部元素紧凑居中？

我尝试对包含多个带类内部div的外层div进行水平居中，示例代码如下：

<div class="one">
   <div class="two">
      <article class="three">
        ...
      </article>
   </div>
</div>

假设我们不知道one、two、three这些类的样式，能否将<div class="one">及其内部所有元素水平居中？我曾尝试使用text-align: center;样式，但未生效。

更新 #

之前的方案虽有效果，但并非我想要的效果：

• 应用前效果：
• 应用后效果：
• 期望效果：

能否让中心的书籍元素排列得更紧凑？

由于不清楚原有类的样式，需要用强制覆盖的方式调整布局：

1. 让.one容器整体水平居中 #

给.one设置自适应宽度+自动外边距，确保它在父容器中居中：

.one {
  margin: 0 auto !important;
  width: fit-content !important; /* 容器宽度适配内部内容，避免占满整行 */
}

2. 让内部书籍元素紧凑排列 #

通过调整内层容器的布局属性，消除不必要的间隙：

.one .two {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 5px !important; /* 按需调整元素间的间隙，设为0就是完全紧凑 */
  padding: 0 !important; /* 移除容器内边距 */
}

.one .two .three {
  margin: 0 !important; /* 移除书籍元素自身的外边距 */
}

说明 #

• 使用!important是为了强制覆盖原有类的样式（因为不知道原有样式的优先级）；
• width: fit-content确保.one不会撑满父容器，这样margin: 0 auto才能生效；
• flex布局可以灵活控制内部元素的排列方向、换行和间隙，调整gap值就能控制书籍的紧凑程度。

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