三种居中方法

第一种

样式：

*{margin:0;padding:0;}

div {
　　 position:absolute;
    width:300px;
    height:300px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
    background-color: #ccc;
}

第二种

css样式：

 

*{margin:0;padding:0;}
div {
    position:absolute;
    width:300px;
    height:300px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color: #ccc;
}

 第三种

css样式：

*{margin:0;padding:0;}
html,body{height:100%;}
body{text-align:center;}

body:after{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;

}
img{
    vertical-align:middle;
}
==========================华丽丽的分割线==============================
前面两种都是用定位来实现。第一种它的“margin-left”和“margin-top”一定要设置为div宽的一半，高的一半。

第三种是用基线来实现的，主要用于图片的文本居中其所在父级样式一定要设置为:"display:inline-block;vertical-align:middle;"
并且图片样式也必须设置为:"vertical-align:middle;"其他元素使用时一定要把元素样式设置为“display:inline-block;”
=====================================================================
第一种，第二种实现效果为：

 

第三种实现效果为：