HTML5是一種新的標準，它支持水平和垂直居中元素的新方法。

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這些代碼利用了CSS的絕對定位和變換屬性。首先，通過將元素的位置設置為絕對，可以使其脫離文檔流并相對于其相對定位的祖先進行定位。然后，將其頂部和左側位置設置為50%，將元素的中心點放置在其相對定位的祖先容器的中心。然后，使用CSS3的transform屬性將元素相對于自己的中心點向左和向上移動50%，實現水平和垂直居中。

html, body {
height: 100%;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}

另一種方式是使用CSS的新特性flexbox布局。在包含元素的容器中設置display: flex，然后使用justify-content和align-items屬性設置元素在容器中的水平和垂直對齊方式。這些屬性可以接受值center，使元素相對于容器進行水平和垂直居中。