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小提琴： 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%; }
}

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

Answer 2

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

对齐中心不起作用

2 个答案: