一、絕對定位
在CSS中,position: absolute;
可以讓我們將一個元素相對於它的最近非static的祖先元素進行定位。在下面的示例中,我們將一個具有固定寬高的元素在其父元素中央進行居中顯示。首先需要讓父元素相對定位(position: relative;
),然後給要定位的元素設置絕對定位,再通過設置top: 50%
和left: 50%
將其移動到父元素的中心位置,最後通過負距離調整元素的位置。
.parent { position: relative; width: 400px; height: 400px; border: 1px solid black; } .child { position: absolute; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; top: 50%; left: 50%; background-color: red; }
原創文章,作者:OZSL,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/134729.html