在Web開發中，垂直居中一直是一個比較難以解決的問題。下面介紹一種基于CSS樣式的垂直居中方式。

.box {
width: 200px;
height: 200px;
background-color: #ccc;
display: flex;  /* 使用Flex布局 */
justify-content: center;  /* 在橫向上居中 */
align-items: center;  /* 在豎向上居中 */
}

以上代碼中，設置一個寬高為200px的盒子，并將其display屬性設為flex。接著使用justify-content:center和align-items:center分別在橫向和豎向上居中盒子內的內容。

實際運用中，我們可以將.class的class替換成自己的類名，從而在樣式表中定義多個需要垂直居中的元素。

這種方法兼容性不錯，能夠在現代瀏覽器上正常使用，但在一些較老的瀏覽器上可能會有兼容性問題，需要考慮兼容性黨。