Позиционирование моего кругового круга в середине страницы

Question

Я создал круг с контентом в нем, который не только переворачивает, но и левит ... Я хотел бы обеспечить, чтобы этот круг размещался посередине браузера пользователей , по какой-то причине (я считаю, что из-за флип) круг не центрирован.

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

Вы неправильно рассчитали ширину и высоту .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 (Кроме того, я удалил маржу в .floating)

Answer 2

назначить следующие стили, например, в ваш контейнер div или ваш круг:

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

используйте этот css, чтобы центрировать его в середине вашей страницы. Как это работает: он позиционирует верхний левый угол точно в центре, а затем отрицательный запас «оттянет его» вверх & влево. (Маржа всегда половина ширины и высоты)

Answer 3

<div id="container"> 

</div> 

с этим вашим кругом является центром и анимировать => левитация

#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