在css中，要設(shè)置垂直居中主要有兩種方式，一種是將元素設(shè)為絕對(duì)定位，然后利用top和margin來(lái)實(shí)現(xiàn)垂直居中；另一種是使用flex布局。以下分別進(jìn)行介紹。

/* 絕對(duì)定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -25px; /* 元素高度的一半 */
}
/* flex布局 */
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.child {
/* 如果元素寬高未知，也可以使用auto實(shí)現(xiàn)垂直居中 */
width: 50px;
height: 50px;
}

    需要注意的是，使用絕對(duì)定位時(shí)，父元素需要設(shè)置為相對(duì)定位；使用flex布局時(shí)，父元素需要設(shè)置為display:flex。此外，這兩種方式可以同時(shí)使用，如：

.parent {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.child {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
}

    以上就是css如何設(shè)置垂直居中的方法，希望對(duì)大家有所幫助。