在CSS中有多種方式可以實現div水平垂直居中的效果，以下是常見的幾種方式：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50%; /* 水平居中 */
margin-top: -50%; /* 垂直居中 */
}
.container {
display: table;
width: 100%;
height: 100%;
}
.centered {
display: table-cell;
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
注意：以上方式中的.container為包裹div的父元素，.centered為要居中的div。可以根據實際需要選擇適合的方式。
