父元素

.maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);}

子元素：

.minbox{ width: 200px; height: 200px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);}

效果图（下面几种方法效果图一样）：

第一种： CSS绝对定位
主要利用绝对定位，再用margin设置为auto
水平垂直居中对齐：

.align-center{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;}

第二种： CSS绝对定位
主要利用绝对定位，再用margin调整到中间位置。

水平垂直居中对齐：

.align-center{ position: absolute; left: 50%; top: 50%; margin-left: -100px; /*width/-2*/ margin-top: -100px; /*height/-2*/}

第三种： CSS绝对定位 + Javascript/JQuery
主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。

水平垂直居中对齐：

.align-center{ position: absolute; left: 50%; top: 50%;}

JQuery：

$(function(){ $(".align-center").css( { "margin-left": ($(".align-center").width()/-2), "margin-top": ($(".align-center").height()/-2) } );});

第四种： CSS3绝对定位 + 位移
使用绝对定位与CSS3的 transform: translate同样也可以达到效果。

水平垂直居中对齐：

.align-center{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*向左向上位移*/}

第五种： Flexbox: [伸缩布局盒模型]
要让元素水平垂直，对于Flexbox模型来说太容易了。

这里得改变一下HTML：

水平垂直居中对齐：

.align-center{ display: flex; display: -webkit-flex; /*兼容问题*/ justify-content: center; align-items: center; }

几种方法的比较：