在web開(kāi)發(fā)中，常常會(huì)使用CSS來(lái)美化頁(yè)面，常常會(huì)遇到要把元素上下居中的情況。但實(shí)際上，CSS并沒(méi)有提供可以使元素上下居中的屬性，因此我們需要通過(guò)一些技巧來(lái)實(shí)現(xiàn)該效果。
一種簡(jiǎn)單粗暴的方法是使用line-height屬性。我們可以先將元素的高度設(shè)為與容器相同，然后將line-height的值設(shè)置為與容器高度相等的值，這樣就可以實(shí)現(xiàn)垂直居中。
例如，我們需要讓一個(gè)
元素垂直居中顯示：
.container {
height: 300px;
}
.box {
height: 300px;
line-height: 300px;
}在上面的例子中，我們將容器的高度設(shè)為300px，將要居中的元素的高度也設(shè)為300px，然后將line-height的值設(shè)置為300px，這樣就能讓元素在容器中垂直居中了。
另外一種方法是使用flexbox布局。通過(guò)使用align-items: center屬性，我們可以使子元素在父元素中垂直居中。以下是一個(gè)簡(jiǎn)單的例子：
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.box {
height:100px;
width: 100px;
}在上面的例子中，我們將容器設(shè)為一個(gè)flexbox布局，然后使用align-items: center屬性使子元素垂直居中。同時(shí)，我們還使用了justify-content: center屬性來(lái)使子元素水平居中。這樣，我們就能實(shí)現(xiàn)元素在容器中完美居中了。