HTML对于元素水平垂直居中的探讨

子元素：

CSS Code复制内容到剪贴板

.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 Code复制内容到剪贴板

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

JQuery：

JavaScript Code复制内容到剪贴板

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

第三种： CSS3绝对定位 + 位移

使用绝对定位与CSS3的 transform: translate同样也可以达到效果。

父元素：

CSS Code复制内容到剪贴板

.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);   
}   
  

子元素：

CSS Code复制内容到剪贴板

.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 Code复制内容到剪贴板

.align-center{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -webkit-transform: translate(-50%, -50%);   
       -moz-transform: translate(-50%, -50%);