CSS 定位到底部居中指的是將一個元素垂直居中對齊到父元素的底部,并水平居中對齊。
首先,我們需要給父元素設置position: relative;
的屬性,然后給要定位的子元素設置以下屬性:
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
其中,position: absolute;
使得該元素可以脫離文檔流,bottom: 0;
使其靠近父元素的底部,left: 50%;
使它在父元素的水平中心線上。
接下來,使用transform: translateX(-50%);
讓子元素的左側邊緣向左移動寬度的一半,從而實現水平居中對齊的目的。
總結起來,CSS 定位到底部居中可通過以下方式完成:
.parent { position: relative; } .child { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
下一篇vue界面的跳轉