在網頁設計中,居中是常見的布局需求,對于一些大小未知的元素,我們可以使用 CSS 的自動居中功能。
設置自動居中的方法如下:
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
首先將元素的 position 設為 absolute,然后將 top 和 left 的值設為 50%,表示元素左上角與其容器的中心點對齊。接著使用 transform 屬性的 translate 函數把元素從自身的中心向上、向左移動一半的距離,從而達到居中的效果。
需要注意的是,使用自動居中時,元素的容器應該要有一個明確的寬度和高度,否則無法準確計算元素中心的位置。