将<h1>放在<div>中的<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
}

我在这里添加了一个小提琴：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>

预览

全屏

Answer 2

我会将内容包装在另一个<div>中并使用CSS转换并将绝对位置垂直和水平放置。

来源：https://css-tricks.com/centering-css-complete-guide/

#loading {
  position: relative;
}
#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="loading">
  <div id="loading-content">
    <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>
</div>  

Answer 3

添加另一个容器，并在#loading { width: 100%; height: 100%; left: 0px; position: fixed; display: block; z-index: 99; background: rgba(255, 255, 255, 0.5); } #loading-container { position: relative; top: 50%; transform: translateY(-50%); } #loading-image { display: block; margin: auto; width:10% } #loading_text { color:black; text-align:center; z-index: 101; vertical-align:middle }元素中添加vertically center。

http://jsfiddle.net/mblase75/gfv08q4z/

<div id="loading">
    <div id="loading-container">
        <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>
</div>

@pyqtSlot()
def click_my_btn(self, sender):
    button = QtGui.QPushButton(button)
    button.hide()