CSS在實戰中扮演了非常重要的角色，它可以幫助我們輕松實現頁面布局的效果。在本文中，我們將介紹一些實用的CSS布局技巧。

/* 縱向居中 */
.parent {
display: flex;
align-items: center;
}
/* 橫向居中 */
.parent {
display: flex;
justify-content: center;
}
/* 兩欄布局 */
.parent {
display: flex;
/* 默認左欄占據3/4的寬度 */
flex: 3;
}
.left {
/* 左欄固定寬度 */
width: 200px;
}
.right {
/* 右欄填充剩余寬度 */
flex: 1;
}
/* 柵格布局 */
.parent {
display: grid;
/* 列數和列寬 */
grid-template-columns: repeat(3, 1fr);
/* 行高 */
grid-auto-rows: minmax(100px, auto);
/* 列間距和行間距 */
grid-gap: 10px;
}
/* 響應式布局 */
/* 在窗口寬度小于600px時，兩欄變為上下排列 */
@media (max-width: 600px) {
.parent {
flex-direction: column;
}
}

以上代碼演示了一些常用的CSS布局技巧，如縱向居中、橫向居中、兩欄布局、柵格布局和響應式布局等。我們可以根據具體需求選擇不同的布局方式，達到最合適的效果。