对齐中心不工作

我试图对齐我的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

对齐中心不工作

回答

相关问题