CSS寬度的設(shè)置一直是網(wǎng)頁排版中非常關(guān)鍵的一部分。特別是當(dāng)我們需要將某些元素的寬度設(shè)置為父元素寬度的一定比例，并且還要保證元素在整個屏幕中居中顯示時，就需要使用一些特定的CSS技巧。

/*設(shè)置寬度比例*/
.element {
width: 50%;
}
/*水平居中*/
.element {
margin: 0 auto;
}

上述CSS代碼可以讓一個元素的寬度占據(jù)其父元素的50%。而"margin: 0 auto;"則可以讓該元素在水平方向上居中顯示。這里"0"表示上下外邊距無間距，而"auto"則表示左右外邊距設(shè)置為自動，即居中顯示。

然而，如果要讓一個元素即水平又垂直地居中顯示，就需要使用絕對定位與transform屬性。在這種情況下，我們可以使用以下代碼：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代碼中，我們首先給父元素（即.container）設(shè)置相對定位，然后給子元素（即.content）設(shè)置絕對定位。接下來，我們使用"top: 50%;"和"left: 50%;"屬性將子元素向下和向右移動50%的距離。最后，我們使用"transform: translate(-50%, -50%);"屬性對子元素進(jìn)行微調(diào)，使其在水平和垂直方向上居中。

這些CSS技巧在網(wǎng)頁排版中非常常見，特別是在響應(yīng)式布局中。通過這些技巧，我們可以輕松地實現(xiàn)跨平臺、多設(shè)備的網(wǎng)頁布局，從而提升用戶的瀏覽體驗。