CSS3是前端開發(fā)不可或缺的一門技能，而垂直排列是其中一個(gè)常見的需求。在CSS3中，我們可以使用不同的屬性來實(shí)現(xiàn)垂直排列，下面我們就來一一介紹。

1. display:flex

.container {
display: flex; 
flex-direction: column;
align-items: center; 
justify-content: center; 
}

flex布局在現(xiàn)代瀏覽器中已經(jīng)廣泛應(yīng)用，通過設(shè)置display:flex屬性，然后將flex-direction設(shè)置為column，即可實(shí)現(xiàn)垂直方向的排列。align-items和justify-content屬性分別用來設(shè)置項(xiàng)目在交叉軸和主軸上的對齊方式。

2. display:table

.container {
display: table;
margin:auto;
} 
.item {
display:table-row;
}

display:table屬性可以將元素渲染為類似table的元素結(jié)構(gòu)，我們可以將.container設(shè)置為table，而.item則設(shè)置為display:table-row。通過這種方式，可以實(shí)現(xiàn)均分垂直排列，同時(shí)兼容大部分瀏覽器。

3. display:grid

.container {
display: grid;
grid-template-rows: repeat(3, 20px);
}

display:grid是CSS3新增的布局方式，它可以讓我們更輕松地創(chuàng)建網(wǎng)格式布局。我們可以將.container設(shè)置為grid，然后通過grid-template-rows屬性來設(shè)置每一行的高度。通過這種方式，可以輕松實(shí)現(xiàn)固定高度的垂直排列。

綜上所述，以上三種方法都可以實(shí)現(xiàn)垂直排列，具體使用可根據(jù)需要進(jìn)行選擇。當(dāng)然，在實(shí)際開發(fā)中，我們還需要考慮到兼容性、效果等多方面的因素。