CSS的居中布局一直是前端開發(fā)的一大難點，特別是在讓兩個不同大小的div做居中布局時，會讓開發(fā)者頭疼不已。在這篇文章中，我們將探討如何使用CSS讓兩個不同大小的div實現(xiàn)居中布局。

.container{
display:flex;
justify-content:center;
align-items:center;
}
.small-div{
width:60px;
height:60px;
background-color:red;
margin-right:20px;
}
.large-div{
width:100px;
height:100px;
background-color:green;
}

首先，我們需要在HTML代碼中創(chuàng)建一個外層容器(container)，內(nèi)部包含兩個div元素：一個小的div(small-div)和一個大的div(large-div)。接下來，在CSS中，我們利用flex布局設(shè)置容器為居中布局，并且讓兩個子元素水平居中對齊。

其次，我們給小的div設(shè)置一個右側(cè)的margin值，讓它與大的div有一定的間距。這里使用margin而不是padding的原因是因為我們需要兩個div之間的間距不影響計算它們在父元素中所占的空間。

最后，我們分別給兩個div元素設(shè)置它們自己的大小和背景顏色。這樣我們就成功地實現(xiàn)了兩個不同大小的div元素在外層容器居中布局的效果。