Absolute元素相對父元素水平居中

開門見山

對子元素添加

{
	left: 50%; // 設置左邊距爲父元素寬度的50%
	transform: translateX(-50%); // 將元素向左移動該元素寬度的50%, 即使子元素的寬度大於父元素寬度，二者依然可以保持中心線對齊
}

示例

假設有這樣的元素

<div class="parent">
	<div class="child"></div>
</div>

css樣式爲

.parent {
    position: relative; // 這裏隨意設置， 只要不是static就行
    background-color: #00BCD4;
    margin: 0 auto;
    width: 100px;
    height: 20px;
}

.child {
    position: absolute;
    background-color: #9e9e9e;
    width: 150px;
    height: 300px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

結果如圖