不考虑保证金自动

Question

我定义了以下内容 CSS class

.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;
      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; }

然而，margin-right: auto 和 margin-left: auto 没有被考虑在内（有或没有 !important，所以我的标签没有居中。是因为弹性吗？您知道导致问题的原因吗？

谢谢！

Answer 1

您已经设置了 display: flex 然后设置了 position: absolute technically doesn't matter 但您的 top: 0 覆盖了所有弹性属性。

你的 css 应该能够让一切居中：

.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;
      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; }

Answer 2

感谢 TerminalFlow 帮助我确定问题出处，这是解决问题的代码：

.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;
      margin-left: auto !important; 
      margin-right: auto !important;
      max-width: 300px;
      width: 100%;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      padding: 1em;
      border-radius: 4px;
      border-bottom: 0;
      color: #FFFFFF;
      text-align: center;
      text-decoration: none;
      z-index: 3; }

这样，标签居中并且仍然符合我想要的覆盖。

不考虑保证金自动

margin auto not taken into account

css

margin