CSS是控制網頁樣式的語言，可以讓網頁呈現出各種不同的效果。其中，設置div居中是一種非常常見的需求。下面，我們來一起學習如何使用CSS實現div居中的效果。

/*使用margin實現水平居中*/
.center{
width: 200px;
height: 200px;
margin: 0 auto;
}
/*使用flex實現水平垂直居中*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*使用position和transform實現水平垂直居中*/
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在以上代碼中，我們分別使用了margin、flex和position+transform三種方法實現div居中的效果。

margin方法：將div的左右margin值設置為“auto”，將會自動將div水平居中。

flex方法：將div的父元素設置為Flex布局，然后在容器中設置justify-content和align-items屬性分別為center，將會使div元素水平垂直居中。

position+transform方法：將div的position屬性設置為absolute，再利用top、left、transform屬性將元素居中。

綜上，以上三種方法均可實現div居中的效果，具體使用哪種方法取決于實際情況。相信大家通過學習本文，已經能夠熟練掌握如何實現div居中了。