CSS顯示圖的中心點是指在CSS定位的元素中,其顯示的中心位置。我們可以使用CSS來控制一個元素在顯示中的位置,其中重要的一點就是確定其中心位置。
在CSS中,元素的位置是通過坐標系來確定的。坐標系的原點默認是元素的左上角,X軸從左到右增加,Y軸從上到下增加。
{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
上述代碼用來將一個元素放置在其父元素的中心。左右居中可以使用left:50%實現,但是上下居中需要使用top:50%。此時,元素的中心點已經位于父元素的中心,但是需要進一步調整使其完全居中。
在上述代碼中,使用transform屬性來進行細微調整。translate函數接受兩個參數,分別對應X軸和Y軸的偏移量。在此處,-50%代表將元素向左上方移動其寬度或高度的一半,即使其完全居中。
上一篇css顯示在右下角