對齊中心不工作

我試圖對齊我的div裏面的文本水平和垂直，但它只是水平對齊。一切我試圖不工作... 這裏是我的CSS代碼：對齊中心不工作

#loading > h1 { 
    text-align: center; 
    font-size: 21px; 
    animation: fadeUpIn 3s; 
    -webkit-animation: fadeUpIn 3s; /* Safari and Chrome */ 
} 

@-webkit-keyframes fadeUpIn /* Safari and Chrome */ 
{ 
    from { opacity:0; top:150px; } 
    to { opacity:1; top: 70px; } 
} 
#loading{ 
    position: absolute; top: 0; left: 0; 
    width:100%; 
    height: 100%; 
    background-color: gray; 
    color: white; 
    opacity: 1; 
    transition: 1s; 
    visibility: visible; 
} 
#loading.hidden{ 
    opacity: 0; 
    visibility: hidden; 
}

我的html代碼：

<div id="loading"> 
<h1>Creative. Simple.</h1> 
</div>

整個網站的

JS提琴： https://jsfiddle.net/sjyoqdqy/

來源

2017-07-06 Daniel Sushik

['文本align']（https://developer.mozilla.org/en- US/docs/Web/CSS/text-align）僅對齊父塊內的內聯內容。它不會垂直居中塊。那是你想要完成的嗎？ – showdev

[如何將元素水平和垂直居中？]（https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically）另請參見[CSS中心文本（水平和垂直）在一個div塊內]（https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block） – showdev

是的，但我嘗試的一切不起作用。 –

我會建議將此CSS添加到#loading > h1：

#loading > h1 { 
    position: absolute; 
    top: 48%; 
    left: 0; 
    right: 0; 
    margin: 0; 
}

然後更新動畫位置是一致的：

@-webkit-keyframes fadeUpIn /* Safari and Chrome */ 
{ 
    from { opacity:0; top:58%; } 
    to { opacity:1; top: 48%; } 
}

小提琴中的示例： https://jsfiddle.net/sjyoqdqy/6/

來源

2017-07-06 19:35:06 trevorp

這沒有奏效。 –

它似乎在我上面提供的小提琴中爲我工作。你還在看什麼問題？ – trevorp

我喜歡它垂直居中和水平居中。 –

-1

#loading { 
    ... 
    display: table; 
} 
#loading h1 { 
    ... 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2017-07-06 19:40:46 NIck

對齊中心不工作

回答

相關問題