在使用position: absolute
的情況下,可以使用以下方法將元素居中:
top: 50%
和left: 50%
將元素的左上角定位到父元素的中心位置。transform: translate(-50%, -50%)
將元素向左上方移動自身寬度和高度的一半,從而使元素的中心與父元素的中心對齊。以下是一個示例代碼:
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: lightgray;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在上述代碼中,.parent
表示父元素,.child
表示子元素。父元素設置了寬度和高度,背景為灰色。子元素使用position: absolute
進行定位,并通過top: 50%
和left: 50%
將左上角定位到父元素的中心位置。transform: translate(-50%, -50%)
將子元素向左上方移動自身寬度和高度的一半,從而使子元素的中心與父元素的中心對齊。
使用上述代碼,子元素將在父元素中居中顯示。