display:table-cell not supported in Mozilla Firefox - html

Question

I have a following div
<div>Circle</div>
I applied styles to the circle using the nth-child, the circle and the text inside it are supposed to spin. In the beginning, when I created the circle, I used
display:table-cell;
property to position the text in the center of the circle. When I run my page in Chrome, all the styles including the positioning look perfect. However, when I ran my code in Mozilla Firefox, I noticed that the positioning left and top don't work when I have display:table-cell; property set. They only work if I remove the display. However, if I remove the display, then my text is messy. In that case I decided to create a pseudo div. I managed to position the text in the the center of the circle, however, when I refresh the page, the spinning circle pushes to the right and the text doesn't spin. How can I fix this problem?
style.css
div:nth-child(3) {
width: 150px;
height: 150px;
background: -webkit-linear-gradient(#006600, #009900, #006600);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006600, #009900, #006600);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006600, #009900, #006600);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#006600, #009900, #006600);
/* Standard syntax */
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
text-align: center;
vertical-align: middle;
position: relative;
display:table-cell;
top: 5%;
left: 75px !important;
color: #F0F0F0;
font-size: 25px;
-webkit-animation-name: spin;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
The following code is when I made a pseudo div, I did not include the css for spinning since it is the same as in the code above. The circle spins, but for that second that it spins it does to the right and then comes back. The text doesn't spin.
div:nth-child(3){
text-align:center;
position:relative;
width: 150px;
top: 50%;
left: 75%;
color: #F0F0F0;
font-size: 20px;
}
div:nth-child(3):after {
content: '';
width: 150px;
height: 150px;
position: absolute;
bottom: -80%;
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: -webkit-linear-gradient(#006600, #009900, #006600);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#006600, #009900, #006600);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#006600, #009900, #006600);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#006600, #009900, #006600);
/* Standard syntax */
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
}
jsFiddle : http://jsfiddle.net/jLwmknk1/

Answer 1

Try applying this:
display: table;
table-layout: fixed;
instead of display:table-cell;