CSS樣式可以用來控制網頁的外觀，包括文字、顏色、布局等等。其中垂直居頂就是網頁布局中常用的一種，可以讓頁面元素在垂直方向上居于頂部。

代碼示例：
.parent{
display:flex;
align-items: flex-start;
}

以上代碼就是實現垂直居頂的核心代碼，它使用了Flex布局中的align-items屬性。將父元素的display屬性設置為flex，就可以讓子元素按照一定的比例分布在父元素內，同時通過align-items: flex-start; 將所有子元素垂直居頂。

除了Flex布局，還有其他的方式可以實現垂直居頂，比如使用display:table和vertical-align屬性，以及使用position和top等屬性。但是，使用Flex布局可以更加方便和靈活地實現頁面布局。

代碼示例：
.parent{
overflow:hidden;
}
.child{
position:relative;
top:50%;
transform: translateY(-50%);
}

以上代碼則是另一種實現垂直居頂的方法，它使用了position和transform屬性。這里將父元素的overflow屬性設置為hidden，將子元素的position屬性設置為relative，top屬性設置為50%，就可以讓子元素相對于父元素垂直居中。然后再使用transform屬性的translateY函數來將子元素移動回到父元素的頂部，完成垂直居頂。

總的來說，實現垂直居頂需要根據具體情況選擇適合的方法，但是Flex布局是一種比較方便和靈活的方式，尤其適合于響應式布局和動態頁面。