Выравнивание по центру CSS Box Flip Animation UL

Question

У меня есть эффект 3D-преобразования CSS, который я хотел бы выровнять по центру страницы.

В принципе, я использую два div; фронт и спина в стороне div, которые затем преобразуются с помощью CSS, добавляя класс с зависанием с jQuery.

Итак Я хотел бы выровнять весь блок ящиков (в конце концов, у меня будет около пяти ящиков) в центр. Я пробовал:

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

И с 'ул' и '#subjectCardsContainer' на их собственном

---

Мой весь код

JSFiddle

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

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

<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>

Answer 1

text-align:center использование для контейнера.

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

FIDDLE DEMO