DIV Floating To The Left Instead Of Staying In The Center Of The Table

Question

I am working on a table within a web page. the table contains a grid of 4 boxes in td tags. I employed the use of a 3D flip transition in my CSS stylesheet for the boxes. The issue i have is that when i apply the CSS to a div within a column (td), the image that had been aligned to the center moves to the left. I tried setting margin-left and then right, of the div to auto, but still nothing. I'd provide part of my HTML and CSS and also the screenshot of the issue. Please help in resolving this -

PS: For some reason, i'm trying to paste my HTML code, but it's not formatting right.

HTML: --> --> This Is The Back! --> --> Payment Log

CSS:

.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
/**width: 320px;
height: 480px;**/
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;

}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

Answer 1

so add text-align center in image parent div

like this:

td{
   text-align: center;
}

Answer 2

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

You can see example in http://jsfiddle.net/nicooprat/GDdtS/