在網頁開發中，如何將頁面元素居中是一個經常遇到的問題。下面介紹幾種html居中的css代碼。

/* 水平居中 */
.center {
margin: auto;
width: 50%; /* 可以根據需要調整寬度 */
}
/* 垂直居中 */
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 水平垂直居中 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* flexbox布局水平垂直居中 */
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

以上代碼分別是實現水平居中、垂直居中、水平垂直居中和使用flexbox布局實現水平垂直居中的方法。

注意：以上代碼在使用時需要將需要居中的元素設置為一個獨立的塊級元素，如div。