在CSS動畫中水平居中文本

CSS似乎是通過第一個字母橫向居中文本。我想使它完全集中在頁面上，而不會破壞動畫。我添加了一個漸變來顯示頁面的精確水平中心。在CSS動畫中水平居中文本

.wrapper { 
 
    height: 100vh; 
 
    background: linear-gradient(to right, #1e5799 0%,#ffffff 50%,#7db9e8 100%); 
 
} 
 

 
.container { 
 
    text-align: center; 
 
} 
 

 
.vcenter { 
 
    position: relative; 
 
    top: calc(50%); 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.container h2 { 
 
    background: red; 
 
    display: inline-block; 
 
    position: absolute; 
 
    opacity: 0; 
 
    overflow: visible; 
 
    -webkit-animation: rotateWord 12s linear infinite 0s; 
 
    -ms-animation: rotateWord 12s linear infinite 0s; 
 
    animation: rotateWord 12s linear infinite 0s; 
 
    margin: 0; 
 
} 
 

 
.container h2:nth-child(2) { 
 
    -webkit-animation: rotateWord 12s linear infinite 3s; 
 
    -ms-animation: rotateWord 12s linear infinite 3s; 
 
    animation: rotateWord 12s linear infinite 3s; 
 
} 
 

 
.container h2:nth-child(3) { 
 
    -webkit-animation: rotateWord 12s linear infinite 6s; 
 
    -ms-animation: rotateWord 12s linear infinite 6s; 
 
    animation: rotateWord 12s linear infinite 6s; 
 
} 
 

 
.container h2:nth-child(4) { 
 
    -webkit-animation: rotateWord 12s linear infinite 9s; 
 
    -ms-animation: rotateWord 12s linear infinite 9s; 
 
    animation: rotateWord 12s linear infinite 9s; 
 
} 
 

 
@-webkit-keyframes rotateWord { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-30px); 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0px); 
 
    } 
 
    17% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0px); 
 
    } 
 
    20% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(30px); 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes rotateWord { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    opacity: 0; 
 
    -ms-transform: translateY(-30px); 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    -ms-transform: translateY(0px); 
 
    } 
 
    17% { 
 
    opacity: 1; 
 
    -ms-transform: translateY(0px); 
 
    } 
 
    20% { 
 
    opacity: 0; 
 
    -ms-transform: translateY(30px); 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes rotateWord { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-30px); 
 
    transform: translateY(-30px); 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
    } 
 
    17% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
    } 
 
    20% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(30px); 
 
    transform: translateY(30px); 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="container vcenter"> 
 
    <h2>HEY THERE THIS IS TEXT</h2> 
 
    <h2>DIFFERENT TEXT</h2> 
 
    <h2>THIS IS TEXT</h2> 
 
    <h2>DIFFERENT LENGTHS OF TEXT</h2> 
 
    </div> 
 
</div>

來源

2017-01-13 Tronald

可能重複：http://stackoverflow.com/q/36817249/3597276 –

如果可能的話，你可以刪除'顯示：直列block'從'h2'標籤中添加'width：100％'和'margin：auto'。如果要求紅色背景只是圍繞文本而不是全帶，請在'h2'標籤內添加文本容器並在其中應用顏色。 –

確保設置在@keyframes正確transform值，也是中間的div容器可以去掉，使其更容易。

jsFiddle

body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    height: 100vh; 
 
    text-align: center; 
 
    background: linear-gradient(to right, #1e5799 0%, #ffffff 50%, #7db9e8 100%); 
 
} 
 

 
.container h2 { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    opacity: 0; 
 
    margin: 0; 
 
} 
 

 
.container h2:nth-child(1) { 
 
    animation: rotateWord 12s linear infinite 0s; 
 
} 
 

 
.container h2:nth-child(2) { 
 
    animation: rotateWord 12s linear infinite 3s; 
 
} 
 

 
.container h2:nth-child(3) { 
 
    animation: rotateWord 12s linear infinite 6s; 
 
} 
 

 
.container h2:nth-child(4) { 
 
    animation: rotateWord 12s linear infinite 9s; 
 
} 
 

 
@keyframes rotateWord { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    opacity: 0; 
 
    transform: translate(-50%, -30px); 
 
    } 
 
    5% { 
 
    opacity: 1; 
 
    transform: translate(-50%, 0px); 
 
    } 
 
    17% { 
 
    opacity: 1; 
 
    transform: translate(-50%, 0px); 
 
    } 
 
    20% { 
 
    opacity: 0; 
 
    transform: translate(-50%, 30px); 
 
    } 
 
    80% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="container"> 
 
    <h2>HEY THERE THIS IS TEXT</h2> 
 
    <h2>DIFFERENT TEXT</h2> 
 
    <h2>THIS IS TEXT</h2> 
 
    <h2>DIFFERENT LENGTHS OF TEXT</h2> 
 
</div>

來源

2017-01-13 22:47:26 Stickers

謝謝！爲什麼我還必須在動畫上設置翻譯，爲什麼它不居中，如果我只是將h2設置爲「transform：translate（-50％，0px）」？ – Tronald

@Tronald因爲在關鍵幀中設置的任何規則都會覆蓋前者。看到這個CSS技巧[文章]（https://css-tricks.com/centering-percentage-widthheight-elements/）如何居中工作。 – Stickers

謝謝你。那個網站很棒！ – Tronald

在CSS動畫中水平居中文本

回答

相關問題