HTML5 上下居中的代碼是指在頁面布局中將元素垂直居中顯示。這可以讓頁面看起來更加美觀，也能提高用戶體驗。下面介紹一些常用的 HTML5 上下居中代碼。 首先，使用 CSS 的 flex 屬性可以實現垂直居中。在父元素中設置 display: flex 和 align-items: center，即可實現將子元素垂直居中。 下面是示例代碼： ```html

.parent {
display: flex;
align-items: center;
}
.child {
margin: auto;
}

``` 在這個示例代碼中，父元素 class 為 "parent"，子元素 class 為 "child"。子元素通過設置 margin: auto 來實現水平居中。 另外，HTML5 也支持使用 calc 屬性計算元素高度的方式來實現上下居中。下面是示例代碼： ```html

.parent {
height: 200px;
}
.child {
height: 100px;
margin: calc(50% - 50px) auto 0;
}

``` 在這個示例代碼中，父元素 class 為 "parent"，高度為 200px。子元素 class 為 "child"，高度為 100px。利用 calc 屬性計算出子元素的 margin-top，從而實現上下居中。 除了上述兩種方法，HTML5 還可以通過在父元素中使用 display: table 和 vertical-align: middle 屬性來實現上下居中。下面是示例代碼： ```html

.parent {
display: table;
height: 200px;
}
.child {
display: table-cell;
height: 100px;
vertical-align: middle;
}

``` 在這個示例代碼中，父元素 class 為 "parent"，使用 display: table 屬性使其表現為一個表格。子元素 class 為 "child"，使用 display: table-cell 屬性，同時設置 vertical-align: middle，實現上下居中。 總結來說，HTML5 的上下居中代碼多種多樣，開發者可以根據具體需求選擇合適的方法來實現。以上述三種方法為例，展示了不同方式的實現代碼，希望有助于開發者在網頁制作中的實踐。