在CSS中，有一個(gè)重要的概念就是子絕父相，它是指一個(gè)元素的定位方式是相對(duì)于其父元素而言的。

.parent{
position: relative;
width: 300px;
height: 200px;
border: 1px solid #000;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: #f00;
}

在以上的代碼中，我們首先創(chuàng)建了一個(gè)父元素，設(shè)置了它的樣式，接著我們創(chuàng)建了一個(gè)子元素，并設(shè)置了它的定位方式為絕對(duì)定位，這時(shí)候我們會(huì)看到，子元素的定位方式是相對(duì)于其父元素而言的。在子元素的樣式中，我們?cè)O(shè)置了top:50%和left:50%來(lái)讓子元素水平垂直居中，同時(shí)使用transform: translate(-50%,-50%) 來(lái)拉回子元素自身的寬高，這樣子元素便能完美地水平垂直居中。

通過(guò)子絕父相，我們可以很方便地實(shí)現(xiàn)一些常見(jiàn)的布局，如：垂直居中、水平居中、底部懸掛等等。在開(kāi)發(fā)中，我們需要熟練掌握子絕父相的使用，這樣能夠使我們更加高效地完成頁(yè)面的布局。