CSS中的定寬高以及水平垂直居中是非常常見的設計需求。這些都可以通過使用CSS屬性和選擇器來實現。下面我們來詳細了解一下。

.box {
width: 200px;  /* 定寬 */
height: 200px;  /* 定高 */
position: absolute;   /* 絕對定位 */
top: 50%;   /* 上方居中 */
left: 50%;  /* 左側居中 */
margin-top: -100px;   /* 負margin使元素上移50%的高度 */
margin-left: -100px;  /* 負margin使元素左移50%的寬度 */
}

這段CSS代碼將一個寬高為200px的元素居中顯示。它將元素的位置通過position屬性設置為絕對定位，然后使用top和left屬性將其放置在頁面正中央。為了使元素完全居中，使用負margin值分別減去元素寬和高的一半來上移和左移元素。

更簡單的方法是使用transform屬性，這將完全居中元素元素：

.box {
width: 200px;  /* 定寬 */
height: 200px;  /* 定高 */
position: absolute;   /* 絕對定位 */
top: 50%;   /* 上方居中 */
left: 50%;  /* 左側居中 */
transform: translate(-50%, -50%);   /* 移動元素到中心 */
}

這次，我們使用translate()方法，它將元素在水平和垂直方向上移動50%的寬度和高度。

總的來說，CSS能夠實現所有的排版和居中要求。通過一些不同的屬性和選擇器，就能實現定寬高、水平垂直居中等設計需求。