在網頁設計中，經常需要將元素垂直居中顯示。在HTML和CSS中實現垂直居中的方法有很多種，本文將為大家介紹其中的一些方法。

.box {
display: flex;
justify-content: center;
align-items: center;
}

這是使用flex布局實現垂直居中的方法，將包含元素的父元素設置為display:flex;，使其成為flex容器。然后通過justify-content:center;和align-items:center;使子元素水平和垂直居中。

.box {
position: relative;
}
.box .item {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

這是使用絕對定位實現垂直居中的方法。將包含元素的父元素設置為position:relative;，使其成為定位的相對參考元素。然后將子元素設置為position:absolute;，top: 50%;，表示離參考元素頂部50%的位置。最后使用transform: translateY(-50%);將元素向上移動自身高度的一半，實現垂直居中。

.box {
display: table-cell;
vertical-align: middle;
}

這是使用表格布局實現垂直居中的方法，將包含元素的父元素設置為display:table-cell;，使其成為表單元格。然后使用vertical-align:middle;使元素在單元格內垂直居中。

以上是實現垂直居中的一些常用方法，具體使用要根據實際需要和場景選擇適當的方法進行實現。