未知宽高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;}