未知宽高div水平垂直居中3种方法，div水平居中3种

未知宽高div水平垂直居中3种方法，div水平居中3种

通过css3

利用绝对定位 position:absolute ，css3的新增属性
transform： translate(-50%, -50%) 向左向上移动50%

div{
        position:absolute;
        top:50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
   }

flex

利用flex布局。align-items 垂直居中，justify-content 水平居中

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

伪类

   div{
     width:500px;
     border:1px solid #888;
     display:inline-block;
     vertical-align: middle;
   }
   div:after{
     content:"";
     display: inline-block;
     vertical-align: middle;
     height: 100%;
   }

如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

test是img的祖父节点，p是img的父节点。

#test{
    display:table-cell;
    *display:block;
    *position:relative;
    width:200px;height:200px;
    text-align:center;
    vertical-align:middle;
}
#test p{
    *position:absolute;
    *top:50%;*left:50%;
    margin:0;
}
#test p img{
    *position:relative;
    *top:-50%;*left:-50%;
    vertical-align:middle;
}