HTML5 上下水平居中是網頁設計中常用的技巧之一。在實現網頁布局時，經常需要居中某個元素，比如一個導航欄、文本框或者圖片等等。下面是使用 HTML5 實現上下水平居中的代碼，讓我們一起來看看吧。 首先，我們需要在 HTML5 中創建一個包含要居中的元素的容器。比如在下面的示例中，我們使用了一個 div 標簽來包含一段文字。

<div id="container">
<p>這是要進行居中的一段文字</p>
</div>

接下來，在 CSS 中，我們需要使用一些屬性來對容器進行調整，以實現水平和垂直居中。 首先，我們需要將整個容器居中。這可以通過設置容器的 margin 屬性為 auto 來實現。

#container {
margin: auto;
}

接下來，我們需要將容器內部的元素也居中。這可以通過在容器內部的元素上設置 display 屬性為 inline-block，并將容器的 text-align 屬性設置為 center 來實現。

#container {
margin: auto;
text-align: center;
}
#container p {
display: inline-block;
vertical-align: middle;
}

注意，上述代碼中的 p 標簽也被調整為 inline-block，以使其可以與其他內聯元素進行對齊。 最后，我們還需要設置容器的高度和寬度，以確保容器具有適當的大小。這可以通過將容器的高度和寬度設置為固定值或百分比來實現。

#container {
margin: auto;
text-align: center;
width: 50%;
height: 50%;
}
#container p {
display: inline-block;
vertical-align: middle;
}

通過以上代碼，我們可以輕松地實現 HTML5 中的上下水平居中效果。無論是在實現網頁布局還是美化網頁風格時，都可以使用這種方法來提高設計質量。