CSS 页面居中显示问题

/* 页面顶部居中显示 */
.head {
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
}
/* 页面底部居中显示 */
.foot {
    position: absolute; 
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* 页面上下左右居中显示 */
.center {
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}