对齐中心不起作用答案

【问题标题】：Align center isn't working对齐中心不起作用
【发布时间】：2017-07-07 05:14:48
【问题描述】：

我正在尝试水平和垂直对齐 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/

【问题讨论】：

text-align 仅对齐父块内的内联内容。它不会垂直居中一个块。这就是你想要完成的事情吗？
How to center an element horizontally and vertically? 的可能副本另请参阅CSS center text (horizontally and vertically) inside a div block
是的，但我尝试的一切都不起作用。
如果您向我们展示您尝试过的不同方法以及出了什么问题，这可能会有所帮助。有人可能可以帮助解决问题。

标签： html css text-alignment

【解决方案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%; }
}

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

【讨论】：

它似乎在我上面提供的小提琴中为我工作。您还发现什么问题？
我喜欢它垂直和水平居中。
我刚刚更新了答案以包含动画位置：(jsfiddle.net/sjyoqdqy/6)

【解决方案2】：

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

【讨论】：