CSS是網(wǎng)頁設(shè)計必不可少的一部分，常用于控制模塊的樣式、呈現(xiàn)方式等。其中，如何控制div元素的上下居中，是一個我們在布局中經(jīng)常需要解決的問題。下面就來介紹一下CSS實現(xiàn)div上下居中的幾種方法：

/*方法一：絕對定位+margin*/
div {
position: absolute;
top: 50%;
height: 200px; /*定制div的高度*/
margin-top: -100px; /*負值為div高度的一半*/
}
/*方法二：Flex布局*/
.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
height: 100vh; /*占滿整個視口*/
}
/*方法三：CSS Table*/
.container {
display: table;
width: 100%;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center; /*水平居中*/
}

這幾種方法都有其特點，比如方法一適合單個div居中, 方法二適合多個div的居中，而方法三則是兼容性最好的一種方法。使用時可以根據(jù)實際需求來選擇合適的方法。在實際開發(fā)中，我們常常需要把元素居中，尤其是對于網(wǎng)頁中的內(nèi)容塊、導(dǎo)航條等，都需要進行居中控制。因此，在編寫CSS時，此類常見布局問題的處理方法也應(yīng)當(dāng)掌握在手。