CSS樣式條居中是網頁設計中常用的技巧。通過設置樣式條的外邊距和寬度，我們可以很容易地實現水平和垂直居中。下面是居中樣式條的代碼演示：

.style-bar {
width: 200px;
height: 40px;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}

上述代碼通過設置樣式條的寬度和高度，然后使用margin: auto將其水平居中。接著，使用position: absolute和top, bottom, left, right這四個屬性，實現樣式條的垂直居中。其中，top和bottom都為0表示讓樣式條垂直居中，而left和right都為0表示讓樣式條水平居中。

我們也可以將上述代碼簡化，只使用margin屬性實現居中效果：

.style-bar {
width: 200px;
height: 40px;
margin: 0 auto;
}

上述代碼中，margin屬性的值為0 auto，表示將樣式條水平居中，并將上下外邊距設為0實現垂直居中。