一、使用CSS設置絕對定位元素的位置
.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
在CSS中,使用“絕對定位”將元素放置在其父元素的指定位置。要定位元素,請使用 position 屬性。使用 top,bottom,left,right 屬性,同時使元素脫離文檔流,並且在其父元素中的位置被絕對規定。要將元素放置在父元素的中央,需要使用 top: 50%; left: 50%; 和 transform: translate(-50%, -50%);。
top 和 left 屬性指定元素的左上角被放置到其包含元素中的距離。將這些屬性設置為50%,會將元素的中心放置到包含元素的中心。translate(-50%, -50%) 將元素向左和向上移動50%的寬度和高度。由此,元素將相對於其包含元素的中心定位。
二、使用空白DIV容器進行元素定位
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/312712.html