如何在屏幕中心顯示一個css動畫

我有一個問題，在小屏幕尺寸上完美居中動畫，如< 768px。問題在於動畫的中心需要在屏幕的中心全部出現。如果屏幕變小，它就會漂浮在屏幕右側，但是我希望它在屏幕的每一側均勻地漂浮。如何在屏幕中心顯示一個css動畫

<div class="container" id="" style="padding-right: 0; padding-left: 0;" > 
    <div class="row vertical-center-row" style="overflow: hidden"> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-sm-offset-0 col-xs-12" 
       style="background-color: #ffffff; border-bottom: 1px solid #CBCCCD; 
       border-top: 1px solid #CBCCCD; "> 
       <div class="spinner"> 
        <img class="" src="images/spinner/spinner_bg.png" alt=""> 
        <img class="" src="images/spinner/spinner_fg.png" alt=""> 
       </div> 

       <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 
          col-sm-8 col-sm- offset-2 col-xs-8 col-xs-offset-2" 
        style="margin-top: 3%;"> 
         /*Here is the rest of my content*/ 
       </div> 

      </div> 
     <div> 
    </div> 
</div>

採用這種結構的內容得到正確居中只有當階級=「微調」對於較小的屏幕尺寸我想完成我想在CSS文件媒體查詢行爲股利。

html, body, .container { 
    height: 100%; 
} 

.container { 
    display: table; 
    vertical-align: middle; 
    background-color: transparent; 
} 

.vertical-center-row { 
    display: table-cell; 
    vertical-align: middle; 
} 


@media (min-width: 1200px) { 
    .spinner img{ 
     max-width:100%; 
     height:auto; 
     position: absolute; 
     top:-309px; 
     z-index:-1; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    .spinner img{ 
     max-width:100%; 
     height:auto; 
     position: absolute; 
     top:-244px; 
     z-index:-1; 
    } 
} 

@media (min-width: 767px) and (max-width: 991px) { 
    .spinner img{ 
     max-width:100%; 
     height:auto; 
     position: absolute; 
     top:-300px; 
     z-index:-1; 
    } 
} 

@media (max-width: 766px) { 
    .spinner img{ 
     position: absolute; 
     z-index:-1; 
    } 
}

動畫得到通過添加CSS類自旋

.spin{ 
    -webkit-animation:spin 2s linear infinite; 
    -moz-animation:spin 2s linear infinite; 
    animation:spin 2s linear infinite; 
} 

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); -moz-transform-origin:   center center } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); -webkit-transform- origin: center center } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); -webkit-transform-origin: center center transform-origin: center center} }

引發我對任何暗示或解決方案，以達到我想要

這裏的行爲非常心存感激是這一問題的fiddle

來源

2014-05-23 user3668232

http://jsfiddle.net/qwerasdf/JZ9Rn/ 這裏搗鼓顯示問題 – user3668232

通過絕對定位自動邊距，您可以無需媒體查詢即可將微調器居中。即使當頁面比微調器小時，負的頂部，右側，左側和底部位置仍然保持居中並裁剪。像這樣：

.spinner img{ 
    position: fixed; 
    top:-100%; right:-100%; left:-100%; bottom:-100%; 
    margin:auto; 
    z-index:0; 
}

http://jsfiddle.net/JZ9Rn/3/

來源

2014-05-23 09:43:04 Moob

的問題是我想在後臺微調和頂部的內容它。我正在嘗試構建一個登錄頁面，如果單擊登錄按鈕，我希望觸發微調器。 – user3668232

@ user3668232 - 將其餘內容放在您的微調器上方。我相應地更新了我的答案。 – Moob

抱歉，我忘記了我的問題中的重要部分，內容本身也集中在中間，我用一個小提琴示例更新了問題。我使用display：table和display：table-cell來實現居中。如果我將這個類添加到我的內容中，它會導致不想要的行爲，並且仍然存在問題仍然存在，圖像漂浮在右側。我希望它在中間是全能的，如果父母變得更小，它就會在邊緣被切斷並留在中間。感謝您的努力到目前爲止 – user3668232

如何在屏幕中心顯示一個css動畫

回答

相關問題