弹框居中是常见的前端问题之一。在CSS中，有多种方法可以让弹框垂直水平居中，下面我们介绍几种常见的方法。

1. 使用Flex布局

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

在父元素上使用Flex布局，然后设置子元素的justify-content和align-items都为center，即可让弹框垂直水平居中。

2. 使用Absolute布局

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

设置父元素的position为absolute，再设置top和left都为50%，再使用transform的translate属性，将弹框向上、向左移动自身宽高的一半，即可实现垂直水平居中。

3. 使用Grid布局

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

设置父元素为Grid布局，再将子元素的justify-self和align-self都设置为center，即可将弹框垂直水平居中。

当然，以上只是几种常用的方法，还有其他的一些实现方式。在实际开发中，需要根据具体的需求选择最适合的方法。