集中对齐CSS Box Flip Animation UL

Question

我有一个CSS 3D转换效果，我想对齐到页面的中心。

基本上，我使用两个div;一个div的前面和后面，然后通过使用jQuery添加一个类来悬挂它来转换CSS。

所以我想将整个方块（最终我将有大约五个盒子）对齐到中心。 我试过了：

 ul, #subjectCardsContainer {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

以及＆＃39; ul＆＃39;和＆＃39;＃subjectCardsContainer＆＃39;在他们自己

---

我的整个代码

JSFiddle

＆＃13;

＆＃13;

$(document).ready(function() {
    $(".card").hover(function() {
      $(this).addClass("flip");
    });
    $(".card").mouseleave(function() {
      $(this).removeClass("flip");
   });
 });

＆＃13;

ul, #subjectCardsContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 li {
    width: 150px;
    height: 150px;
    display: block;
    position: relative;
    list-style-type: none;
    display: inline-block;
     margin: 0px 5px;
}
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      perspective: 800px;
    }
    .card div {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
      z-index: 10;
    }
    .card .front {             /*  Front of each card  */
      background: red;
      text-align: center;
    }
    .card .back {              /*  Back of each card  */
      background: blue;
      text-align: center;
      z-index: 0;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
    .card.flip .front {
      -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
      z-index: 0;  }
    .card.flip .back {
      -webkit-transform: rotateY(360deg); transform: rotateY(360deg);
      z-index: 10;  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subjectCardsContainer">
  <ul>
      <li>
          <div class="container">
              <div class="card">
                  <div class="front">
                      <p>Front 1</p>
                  </div>
                  <div class="back">
                      <p>Back 1</p>
                  </div>
              </div>
          </div>
      </li>
      <li>
          <div class="container">
              <div class="card">
                  <div class="front">
                      <p>Front 2</p>
                  </div>
                  <div class="back">
                      <p>Back 2</p>
                  </div>
              </div>
          </div>
      </li>
  </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用text-align:center作为容器。

ul, #subjectCardsContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;  //added
}

FIDDLE DEMO