欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css定位上下居中顯示

盧春練1年前7瀏覽0評論

CSS定位常用的屬性有position、top、left、bottom、right。其中使用position屬性定義元素的定位類型:

position: relative; // 相對定位,相對于自身原始位置移動
position: absolute; // 絕對定位,相對于其最近的非static父級元素定位
position: fixed;    // 固定定位,相對于視口(瀏覽器窗口)定位

實現(xiàn)上下居中對齊,需要使用絕對定位,配合top和transform屬性,代碼如下:

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

其中,.parent為父元素,需設(shè)置為position: relative;以便讓子元素.child相對于父元素絕對定位。.child為子元素,top: 50%;將子元素上移至父元素中央線,transform: translateY(-50%);再將子元素向上平移自身高度的一半,即可實現(xiàn)上下居中對齊。

需要注意的是,若子元素高度大于父元素,則無法居中對齊,需針對不同情況選擇其他解決方案。