HTML 居中内联 block

Question

我试图将图像上方的文本居中，但似乎无论我做什么它都不会居中

我也尝试过使用 margin 0 auto 但这也没有帮助。

    #search_box {
    	width: 100%;
    	height: 450px;
    	position: relative;
    	text-align: center;
    }
    
    #search_box h1 { 
    	display: inline-block;
    	width: 50%;
    	top: 180px;  
    	color: white;
    	background-color: red;
    	position: absolute; 
    }

<div id="search_box">
    			<img src="images/background_search.jpg" alt="search_box_picture"/>
    			<h1>SOME TEXT</h1>
    		</div>
    

Answer 1

像这样吗？

#search_box {
    width: 100%;
    height: 450px;
    position: relative;
    text-align: center;
}

#search_box h1 { 
    display: block;
    width: 50%;
    top: 180px;  
    color: white;
    background-color: red;
  margin: auto;


}

<div id="search_box">
            <h1>SOME TEXT</h1>
            <img src="images/background_search.jpg" alt="search_box_picture"/>
            
        </div>