CSS布局是Web開發中非常重要的一部分。良好的CSS布局能夠讓網頁更加美觀和易于理解。在這篇文章中，我們將介紹一些基本的CSS布局技巧。

/*居中布局*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*網格布局*/
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
/*響應式布局*/
@media screen and (max-width: 768px){
.container{
flex-direction: column;
}
}

第一個代碼段展示了如何使用flexbox實現居中布局。其中justify-content和align-items屬性分別控制元素在水平和垂直方向上的對齊方式。

第二個代碼段展示了如何使用CSS網格布局實現一個網格布局，通過grid-template-columns和grid-template-rows屬性定義了網格的行和列，grid-gap屬性控制了網格單元格之間的間隔。

第三個代碼段展示了如何使用媒體查詢實現響應式布局，當屏幕寬度小于768px時，將容器flex-direction屬性值改為column，實現垂直布局。