彈框居中是常見的前端問題之一。在CSS中，有多種方法可以讓彈框垂直水平居中，下面我們介紹幾種常見的方法。

1. 使用Flex布局

.popup{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

在父元素上使用Flex布局，然后設(shè)置子元素的justify-content和align-items都為center，即可讓彈框垂直水平居中。

2. 使用Absolute布局

.popup{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

設(shè)置父元素的position為absolute，再設(shè)置top和left都為50%，再使用transform的translate屬性，將彈框向上、向左移動自身寬高的一半，即可實現(xiàn)垂直水平居中。

3. 使用Grid布局

.popup-container{
display: grid;
height: 100%;
}
.popup{
justify-self: center;
align-self: center;
}

設(shè)置父元素為Grid布局，再將子元素的justify-self和align-self都設(shè)置為center，即可將彈框垂直水平居中。

當(dāng)然，以上只是幾種常用的方法，還有其他的一些實現(xiàn)方式。在實際開發(fā)中，需要根據(jù)具體的需求選擇最適合的方法。