将我的'翻转'圈子放在页面中间

Question

I have created a circle with content in it which not only flips but also levitates... I would like to ensure this circle is placed in the middle of the users browser, for some reason it (I believe its due to the flip) the circle is not centered.

jsFiddle

HTML

<div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="circle floating">
                            <img src="http://mogul.london/images/logo-home.png" width="217" height="107">
                            <span class="title">Title</span>
                            <span class="subline">Subtitle here</span>
                        </div>
                    </div>
                    <div class="back">
                        <div class="circle floating">
                            <span class="calltext">Call us now on</span>
                            <span class="number">000 000 0000</span>
                            <span class="ordertext">to order or make a reservation</span>
                        </div>
                    </div>
                </div>
            </div>

CSS

body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 15px;
    color:#fff;
}

.flip-container {
    perspective: 1000;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
}
    /* 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;
    transform: rotateY(0deg); /* for firefox 31 */
}

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

.circle {
    background: rgba(255, 0, 73, 0.67);
    text-align: center;
    padding: 85px 35px;
    display: inline-block;

    height: 200px;
    width: 300px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

.circle span {
    display: block;
    text-transform: uppercase;
}

.circle span.title {
    font-size: 60px;
    font-weight: bold;
    letter-spacing: -2px;
}
.circle span.subline {
    font-size: 18px;
    margin-top: -5px;
}
.circle span.calltext {
    font-size: 35px;
    margin-top: 30px;
}

.circle span.number {
    letter-spacing: -2px;
    font-size: 46px;
    font-weight: bold;
}

.circle span.ordertext {
    font-size: 18px;
}

.floating{
    float: left;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}

@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}

Answer 1

You wrong calculated the width and height of .flip-container :

.flip-container, .front, .back {
    width: 370px; // .circle height + 2*padding = 300 + 2*35
    height: 385px; // .circle width + 2*padding + animation translate = 200 + 2*85 + 15
}

Fiddle (Also, I removed the margin in .floating )

Answer 2

assign the following styles eg to your container div or your circle:

position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:-200px
height:400px;
margin-top:-200px

use this css to center it i nthe middle of your page. How it works: It positions the upper left corner exactly in the center and then the negative margin will "pull it back" upwards & to the left. (margin is always half of width and height)

Answer 3

<div id="container">

</div>

with this your circle is center and animate => levitation

#container{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    width:400px;
    height:400px;
    background:rgba(255, 0, 73, 0.67);
    border-radius:50%;
    margin:auto auto;
    -webkit-animation: levite 2s ease-in-out 0s infinite normal;
}
@-webkit-keyframes levite{
    from {-webkit-transform:translate(0, 0);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, 0);    }    
}

see run