为何我的div元素无法居中，始终处于页面一侧？

问题根源 #

你遇到的问题确实和body { direction: rtl; }直接相关：RTL（从右到左）布局会改变Flex容器的默认对齐逻辑，再加上用table嵌套Flex的冗余结构，进一步干扰了居中效果。

修复步骤 #

1. 移除冗余的table嵌套

table是旧时代的布局手段，Flex本身就能实现居中，直接简化HTML结构：

修改后的HTML：

<div class="container">
  <div class="row">
    <div class="column">
      <img src="pics/photos/sample1.png">
      <img src="pics/photos/sample2.png">
      <img src="pics/photos/sample3.png">
    </div>
    <div class="column">
      <img src="pics/photos/sample4.png">
      <img src="pics/photos/sample5.png">
      <img src="pics/photos/sample6.png">
    </div>
    <div class="column">
      <img src="pics/photos/sample7.png">
      <img src="pics/photos/sample8.png">
      <img src="pics/photos/sample9.png">
    </div>
  </div>
</div>

2. 针对RTL布局调整居中逻辑

根据你的需求提供两种可选方案：

方案A：保持页面RTL，仅让图片布局按LTR居中

如果页面整体需要从右到左，但图片网格要保持常规的从左到右居中排列，给Flex容器重置方向并通过父容器实现居中：

/* 外层容器负责整体居中 */
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  /* 也可以用max-width+margin:auto的方式，适合限制最大宽度的场景 */
  /* max-width: 1200px;
  margin: 0 auto; */
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  direction: ltr; /* 重置Flex容器为从左到右，避免RTL干扰 */
  max-width: 100%; /* 限制宽度，确保居中效果可见 */
}

/* 保留原有CSS样式 */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

方案B：让图片布局也遵循RTL逻辑居中

如果需要图片网格也按从右到左排列，只需给父容器添加居中对齐即可，无需重置方向：

.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  max-width: 100%;
}

/* 保留原有CSS样式 */

关键提示 #

• direction: rtl会将Flex容器的默认对齐起点改为右侧，因此常规的居中方法需要结合容器方向调整
• 给Flex容器设置max-width是居中生效的核心，否则容器会占满整个页面宽度，无法体现居中效果

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