在HTML5中，可以使用div元素實現多種布局效果。其中，水平居中是常見的需求。以下是針對水平居中的不同場景，給出的代碼實現。

//實現已知寬度和高度的元素水平居中
div {
width: 300px;
height: 200px;
margin:0 auto;
}
//實現未知寬度的元素水平居中
div {
display: inline-block;
margin: 0 auto;
}
//實現絕對定位的元素水平居中
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
//實現flexbox布局的元素水平居中
.parent {
display: flex;
justify-content: center;
}
.child {
align-self: center;
}
//實現grid布局的元素水平居中
.parent {
display: grid;
justify-content: center;
}
.child {
justify-self: center;
}

以上代碼覆蓋了多種布局方式，對于不同的情況可根據實際需求選擇適合的方法。注意在使用絕對定位居中時，需要給父元素設置相對定位。