div中div水平垂直居中

方法-1

img { vertical-align: middle; }

div:before { content: "";

display: inline-block;

width: 0; height: 100%;

vertical-align: middle;

} 

方法0

.item{
　　position:absolute
　　top:50%
　　left:50%
　　transform:translate3D:（-50%,-50%,0）
}

方法1：水平：margin:0 auto;

垂直：使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                position: relative;
 
            }
 
            .child{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }

方法2：table cell:

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
            }
 
            .chlid{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                margin: 0 auto;
            }

3.clientWidth:可视区域宽度；offsetWidth:元素宽度，scrollWidth:页面总宽。

4.行级元素可通过line-height垂直居中

5 移动端css3:

.parent{
  display:-webkit-box;     //显示成盒子模式
-webkit-box-align:center;   //垂直居中
}

6 flex布局

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}