CSS是一種用來定義網頁顯示樣式的語言，它可以幫助我們輕松地實現各種頁面效果。當我們在設計網頁時，通常會遇到許多控件需要居中顯示。在這篇文章中，我們將會介紹如何使用CSS來讓控件實現居中顯示。

首先，我們需要了解兩種情況：控件寬度固定，控件寬度不固定。如果控件寬度固定，那么我們可以使用以下代碼：

.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.control {
width: 200px;
height: 100px;
}

上述代碼中，我們創建了一個容器`container`并且將其寬高設置為100%。接著，我們通過設置`display: flex;`將`container`轉換為一個伸縮盒模型。然后，我們將`justify-content`和`align-items`兩個屬性值都設置為`center`，這樣我們就可以讓`control`控件在容器中水平和垂直居中顯示。

如果控件寬度不固定，我們可以使用以下代碼：

.container {
width: 100%;
height: 100%;
display: table;
}
.control {
display: table-cell;
vertical-align: middle;
}

上述代碼中，我們同樣創建了一個`container`容器，并將其寬高設置為100%。接著，我們使用`display: table;`將`container`改為表格布局，并將`control`設置為單元格。最后，我們將`control`的垂直對齊方式設置為`middle`，這樣就可以讓`control`控件在容器中垂直居中對齊了。

需要注意的是，在使用以上代碼的時候，我們需要將`container`的父容器也設置為相對布局或表格布局，這樣才能保證居中效果的正確顯示。