以下都只针对现代浏览器，未兼容低版本的IE以及其他非主流浏览器。

CSS垂直居中的常用方案如下：

1. 使用 flexbox（弹性布局）

.container {
  display: flex; /* 将容器设置为flex布局 */
  align-items: center; /* 水平对齐项目并且垂直居中 */
}

2. 使用表格布局：

.container {
   display: table; /* 将容器设置为表格布局 */
}
 
.centered {
   display: table-cell; /* 将要居中的元素作为单元格显示 */
   vertical-align: middle; /* 垂直居中 */
}

3. 使用绝对定位和 transform 属性：

.container {
   position: relative; /* 相对于该容器进行定位 */
}
 
.centered {
   position: absolute; /* 绝对定位 */
   top: 50%; /* 距离上边界的百分比值 */
   left: 50%; /* 距离左边界的百分比值 */
   transform: translate(-50%, -50%); /* 通过transform属性来微调位置 */
}

4. 使用 line-height 属性：

.container {
   height: 200px; /* 指定容器高度 */
   text-align: center; /* 文本内部居中 */
   line-height: 200px; /* 与容器高度保持一致，实现垂直居中效果 */
}