CSS3是一種用來描述網頁樣式的語言，它的強大功能不僅限于美化頁面，還可以實現復雜的排版效果。下面我們來看幾個CSS3排版的實例。

/* 將文字垂直居中 */  
.parent {  
display: flex;  
align-items: center;  
}  
.child { 
/* 這里要將文字封裝在容器里面 */  
display: inline-block;  
} 
/* 定位到頁面中心的水平線與豎直線 */
.center-line {  
position: fixed;  
top: 50%;  
left: 50%;  
width: 1px;  
height: 100%;  
background-color: #ccc;  
}  
.center-line-horizontal {  
transform: translate(-50%, 0);  
}  
.center-line-vertical {  
transform: translate(0, -50%);  
} 
/* 讓兩個元素等寬 */
.container {  
display: flex;  
justify-content: space-between;  
}  
.item {  
width: 50%;  
}

第一個實例中，我們可以使用flex布局，來將容器父元素的內容進行垂直居中排列。第二個實例中，我們使用定位來將一個水平線與豎直線固定在頁面的中心，達到頁面分割的效果。最后一個實例我們使用了flex布局為兩個子元素分配等寬的空間，很好的解決了在響應式設計中元素的排版問題。