放 <h1> 下面 <img> 在 <div>

Question

我有一個顯示的加載div，我想將文本放置在<img>下的<h1>中，我可以將其水平對齊在中間，但是我不能將其對齊在<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元素內。

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

 #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 } 

 <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>