在html5網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，頁(yè)面垂直居中是經(jīng)常要處理的問(wèn)題之一。下面給大家介紹幾段常用的html5垂直居中代碼。

// 方法1：使用display:flex實(shí)現(xiàn)垂直居中
.container {
display: flex;
align-items: center;
justify-content: center;
}
// 方法2：使用absolute和margin實(shí)現(xiàn)垂直居中
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 方法3：使用table和vertical-align實(shí)現(xiàn)垂直居中
.container {
display: table;
width: 100%;
height: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
}
// 方法4：使用line-height實(shí)現(xiàn)垂直居中
.container {
height: 500px;
}
.content {
height: 300px;
line-height: 300px;
text-align: center;
}

以上就是四種常用的html5垂直居中代碼，大家可以根據(jù)具體情況選擇應(yīng)用，希望對(duì)大家有所幫助！