javascript - 在 <div> 中将 <h1> 放在 <img> 下方

Question

我有一个显示的加载 div，我想在 <h1> 中显示文本在 <img> 下面我可以让它在中间水平对齐，但我不能让它在 <img> 下面对齐这是我的 HTML

<div id="loading">

  <img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
  <h1 id="loading_text">Loading...</h1>
</div>  

还有我的 CSS

#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block; 
z-index: 99;
background: rgba(255, 255, 255, 0.5);

}


#loading-image {

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
width:10%
}

#loading_text {
color:black;
text-align:center;
z-index: 101;
vertical-align:middle
}

我在这里放了一个 fiddle :http://jsfiddle.net/myh5f13q/

那么我怎样才能得到 <h1>水平居中并位于 <img> 下方？

谢谢

Answer 1

去掉所有的定位，这样给:

#loading {
  display: block;
  z-index: 99;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#loading-image {
  width: 10%;
  display: block;
  margin: auto;
}
#loading_text {
  color: black;
  text-align: center;
  z-index: 101;
  vertical-align: middle
}

<div id="loading">
  <img id="loading-image" src="http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif" alt="Loading..." />
  <h1 id="loading_text">Loading...</h1>
</div>

预览

全屏