集中对齐CSS Box Flip Animation UL

Question

I have got a CSS 3D transformation effect, which I would like to align to the center of the page.

Basically, I am using two divs; a front and a back in side a div, which then get transformed with CSS by adding a class on hover with jQuery.

So I would like to align the whole block of boxes (eventually I'll have about five boxes) to the center. I have tried:

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

And with 'ul' and '#subjectCardsContainer' on their own

---

My whole code

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

use text-align:center for the container.

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

FIDDLE DEMO