未考虑保证金自动[关闭]

Question

我已经定义了以下 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;
      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

感谢 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; }

这样，标签居中并且仍然尊重我想要的叠加层。

Answer 2

事实上你已经设置了display: flex，然后设置了position: absolutetechnically doesn't matter，但是你的top: 0覆盖了所有的flex属性。

您应该能够将所有内容都集中在您的 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; }