水平豎直居中是CSS中一個非常實用的技術，特別是在網頁排版中。水平居中是指將元素水平方向上置于父元素的中心，而垂直居中是指將元素垂直方向上置于父元素的中心。下面我們將通過代碼示例演示如何實現水平豎直居中。 首先，我們需要確保父元素具有相對定位（relative）或絕對定位（absolute）。接下來，我們可以使用以下代碼將子元素水平居中： ``` .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateX(-50%); } ``` 在上面的代碼中，我們通過將子元素的定位方式設為絕對定位，將其垂直位置設置為50%，即父元素的中心位置，接著使用transform屬性將其水平方向上移動50%（即元素自身寬度的一半），實現水平居中。 而要實現垂直居中，則可以使用以下代碼： ``` .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 在上面的代碼中，我們將子元素的定位方式設為絕對定位，將其垂直位置設置為50%，水平位置設置為50%，即父元素的中心位置，接著使用transform屬性將其水平方向和垂直方向上分別向左和向上移動50%（即元素自身寬度和高度的一半），實現垂直居中。 需要注意的是，以上代碼使用的是絕對定位，因此作為子元素的元素，需要確保其父元素具有相對定位或絕對定位。 綜上所述，使用上述代碼可以實現水平豎直居中的效果，提高網頁設計的美觀程度和用戶體驗。