绝对定位元素设置margin左右auto不生效无法居中是什么原因？

• 该问题不是flex布局导致的，你设置的display: flex仅作用于该<a>标签的内部子元素布局，和它自身在父容器中的定位居中逻辑没有关联。
• 问题的核心诱因是你为<a>标签设置了position: absolute绝对定位属性，改变了元素的尺寸计算规则：
  • 普通文档流中块级元素设置margin-left: auto; margin-right: auto可以生效，是因为默认状态下块级元素的水平总宽度（内容宽度+内边距+边框+外边距）会自动填满父元素的内容区，浏览器会将左右auto值的外边距平分剩余空间，实现水平居中。
  • 绝对定位元素脱离了普通文档流，默认不会自动填充父元素的水平空间，要让margin: 0 auto对绝对定位元素生效，必须同时给元素设置left: 0和right: 0属性，明确告知浏览器元素的水平布局边界，这样浏览器才能计算出可用剩余空间分配给左右外边距。你当前的代码仅声明了top: 0，缺少水平方向的定位边界声明，因此margin: auto无法生效。

修复方案 #

你只需要在原有CSS中补充left: 0和right: 0即可：

.tiles .tile > a {
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background-color 0.5s ease, transform 0.5s ease;
      position: absolute;
      top: 0;
      left: 0; /* 新增水平左边界 */
      right: 0; /* 新增水平右边界 */
      margin-left: auto !important; 
      margin-right: auto !important;
      max-width: 300px;
      width: 100%;
      height: 100%;
      padding: 1em;
      border-radius: 4px;
      border-bottom: 0;
      color: #FFFFFF;
      text-align: center;
      text-decoration: none;
      z-index: 3; 
}

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