麻烦以英雄为中心内容

Question

我很难理解如何将这些内容集中在英雄中。我希望内容在中间垂直和水平居中。我希望解决方案能够做出响应。

以下是我要查找的内容的示例：https://i.imgur.com/EtWNc.png

这是我的HTML：

<div class="Hero">
<div class="Hero_Container">
<h2 class="hero_header">Chef Prepared Meals.</h2> 
<h2 class="hero_header">Home Cooked Taste</h2>
<h3>Delivered Warm To Your Door</h3>
<button class="browse_menu_btn" href="/menus/">Browse This Week's Menu <br> Order Online</button>
<br>
<a href="/delivery">Check Our Dallas Delivery Area</a>
</div>  
</div>

这是我的css：

div.Hero {
background-image: url(//cdn.shopify.com/s/files/1/0456/2857/t/2/assets/stock_bg.jpg?215 );
background-size: 100% auto;
background-repeat: no-repeat;
height: 500px;
}

div.Hero_Container {
text-align: center;
color: #FFFFFF;
}

任何帮助或建议都将不胜感激。

Answer 1

假设您想将div.Hero_Container居中，对于400px x 400px的元素：

position: absolute;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -200px;