对齐中心不起作用

Question

我试图水平和垂直对齐 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 fiddle 全站： https://jsfiddle.net/sjyoqdqy/

Answer 1

我建议将此 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%; }
}

Fiddle 举个例子： https://jsfiddle.net/sjyoqdqy/6/

Answer 2

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

对齐中心不起作用

Align center isn't working

html

css

text-alignment