CSS定位常用的屬性有position、top、left、bottom、right。其中使用position屬性定義元素的定位類型:
position: relative; // 相對定位,相對于自身原始位置移動 position: absolute; // 絕對定位,相對于其最近的非static父級元素定位 position: fixed; // 固定定位,相對于視口(瀏覽器窗口)定位
實現上下居中對齊,需要使用絕對定位,配合top和transform屬性,代碼如下:
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
其中,.parent為父元素,需設置為position: relative;以便讓子元素.child相對于父元素絕對定位。.child為子元素,top: 50%;將子元素上移至父元素中央線,transform: translateY(-50%);再將子元素向上平移自身高度的一半,即可實現上下居中對齊。
需要注意的是,若子元素高度大于父元素,則無法居中對齊,需針對不同情況選擇其他解決方案。