CSS可以非常方便地進行頁面布局，讓我們快速創建漂亮的網頁。下面分享一些CSS布局模板。

/* Flexbox 布局 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid 布局 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
/* 浮動布局 */
.main {
float: left;
width: 70%;
}
.sidebar {
float: right;
width: 30%;
}
/* 絕對定位布局 */
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 網格布局 */
.container {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 20px;
}

以上布局模板只是CSS中一小部分功能，掌握CSS布局的技巧可以讓網頁設計更加自由和靈活。希望這些模板可以幫助你實現你的網頁布局。