CSS定位屬性包括position、top、right、bottom和left,其中top、right、bottom和left屬性可以用百分數(shù)表示相對于父元素的位置。
div { position: relative; /* 父元素設置為相對定位 */ width: 300px; height: 200px; } p { position: absolute; top: 50%; /* 距離父元素頂部距離為50% */ left: 50%; /* 距離父元素左側距離為50% */ transform: translate(-50%, -50%); /* 改變p元素自身定位,使其居中 */ }
在上面的代碼中,p元素的top和left屬性值分別為50%。這意味著p元素距離父元素頂部和左側的距離均為父元素寬度和高度的50%。如果父元素的寬度和高度分別為300px和200px,則p元素相對于父元素的位置為150px和100px。
需要注意的是,當父元素的寬度和高度改變時,p元素的位置也會隨之改變。
為了讓p元素始終居中,可以使用transform屬性的translate()函數(shù),該函數(shù)可以根據(jù)元素自身定位的距離和比例值進行偏移量的計算。在上述代碼中,-50%表示偏移量為元素寬度和高度的50%。