CSS中的垂直等分界面是在網頁設計中非常重要的一部分，原因是他可以讓你在網頁中設計出美觀且規整的版面。下面為大家介紹一些相關的知識。

.main{
display:flex;
justify-content:center;
align-items:center;
height:200px;
}
.box{
width:25%;
height:100%;
margin:0 5px;
}

首先需要充分利用CSS的Flex屬性，通過display:flex來設定容器的flex格式，justify-content:center來設置容器中的元素水平居中，align-items:center設置容器中的元素垂直居中。

.main{
display:table;
width:100%;
height:200px;
}
.box{
display:table-cell;
width:25%;
height:100%;
vertical-align:middle;
}

其次需要使用CSS的table格式，通過設置display:table來使CSS識別容器為table標簽，通過設置display:table-cell來使CSS識別容器中的元素為td標簽，通過設置vertical-align:middle來實現將內容居中顯示。

.main{
position:relative;
width:100%;
height:200px;
font-size:0;
text-align:center;
}
.box{
position:relative;
display:inline-block;
width:25%;
height:100%;
font-size:16px;
text-align:left;
vertical-align:middle;
}
.box:before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}

還可通過設置position:relative;和top:50%屬性來進行垂直居中，但是需要通過margin-top負值來實現，這種方式只適合固定寬高的布局。還可通過設置display:inline-block;和vertical-align:middle來進行垂直居中，同時設置:before偽類讓其撐滿高度，從而實現垂直居中。

以上就是關于CSS垂直等分界面的相關知識，希望對大家有所幫助。