html居中 长宽高代码,不定宽高的垂直居中.html

p{margin:0;padding:0}

.wrap,.wrap1{

width:30%;

padding-top:30%;

background:#eee;

position:relative;

}

.wrap p,.wrap1 p{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

.wrap p img{

max-width:100%;

max-height:100%;

position:absolute;

top:50%;

left:50%;

-webkit-transform-origin:50% 50%;

-webkit-transform:translate3d(-50%,-50%,0);

}

.wrap1 p{text-align:center;font-size:0;}

.wrap1 p:after{

width:0;

height:100%;

display:inline-block;

vertical-align:middle;

content:"";

}

.wrap1 p img{

display:inline-block;

max-width:100%;

max-height:100%;

vertical-align:middle;

margin:0 auto;

}

第一种方案

111

第二种方案

111

水平垂直居中的随意内容

一键复制

编辑

Web IDE

原始数据

按行查看

历史