Html和css是網頁開發中非常重要的兩個語言，Html可以用來定義網頁的結構和內容，而css則可以讓網頁變得更加美觀和易于閱讀。其中一個常見的問題就是如何讓圖片和文字等元素水平居中，下面就來介紹一下如何使用Html5和css3來實現水平居中的效果。

<div class="center-div">
<img src="img.jpg" alt="圖片">
</div>

以上代碼使用了flex布局和margin:auto來實現水平居中的效果。在div容器中，我們使用了display: flex屬性和justify-content: center屬性來讓內部的元素水平居中。同時，在img元素中，我們使用了display:block屬性和margin:auto屬性，使其在水平方向上居中。

除此之外，也可以使用text-align屬性來對文字進行水平對齊，例如：

<div class="center-div">
<p>文字居中</p>
</div>

以上代碼使用了text-align屬性來實現文字的水平居中。當然，在實際開發中，還可以根據具體的需求進行靈活的調整和優化，實現更加完美的水平居中效果。