在網頁開發中，有多種方式能讓一個盒子實現水平垂直居中。下面為你介紹幾種常見且快速的方法。
1. 使用 Flexbox 布局
Flexbox 是一種非常便捷的布局模型，能夠輕松實現元素的水平和垂直居中。
?
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;background-color: lightblue;}.child {width: 50px;height: 50px;background-color: lightcoral;}</style><title>Flexbox 居中</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>
?
在上述代碼中，通過將父元素的?display?屬性設置為?flex，使其成為一個彈性容器。justify-content: center?實現了子元素在水平方向上的居中，align-items: center?實現了子元素在垂直方向上的居中。
2. 使用絕對定位和負邊距
此方法利用絕對定位和負邊距來達成元素的水平垂直居中。
?
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {position: relative;width: 300px;height: 300px;background-color: lightblue;}.child {position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin-top: -25px;margin-left: -25px;background-color: lightcoral;}</style><title>絕對定位和負邊距居中</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>
?
這里，父元素的?position?屬性被設置為?relative，作為子元素絕對定位的參考。子元素通過?top: 50%?和?left: 50%?把左上角定位到父元素的中心，再利用負邊距（值為自身寬度和高度的一半）將其向上和向左移動，從而實現水平垂直居中。不過，這種方法要求子元素的寬度和高度是固定的。
3. 使用絕對定位和?transform?屬性
借助絕對定位和?transform?屬性也能實現元素的水平垂直居中。
?transform: translate(-50%, -50%);?意味著元素會在 X 軸和 Y 軸上分別向左和向上移動自身寬度和高度的 50%。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {position: relative;width: 300px;height: 300px;background-color: lightblue;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50px;height: 50px;background-color: lightcoral;}</style><title>絕對定位和 transform 居中</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>
?
父元素的?position?屬性設為?relative，子元素通過?top: 50%?和?left: 50%?把左上角定位到父元素的中心，transform: translate(-50%, -50%)?則將子元素向上和向左移動自身寬度和高度的一半，實現水平垂直居中。這種方法不要求子元素的寬度和高度固定。
4. 使用 Grid 布局
Grid 布局是一種強大的二維布局模型，也能輕松實現元素的水平垂直居中。
?
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.parent {display: grid;place-items: center;width: 300px;height: 300px;background-color: lightblue;}.child {width: 50px;height: 50px;background-color: lightcoral;}</style><title>Grid 居中</title>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>
?
通過將父元素的?display?屬性設置為?grid，使其成為一個網格容器。place-items: center?同時實現了子元素在水平和垂直方向上的居中。
![[python] set](http://pic.xiahunao.cn/[python] set)
