css 总结内容用到的绝对居中的几种方式

在手机排版时，内容绝对居中用到的特别频繁。

1.

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

.test{
position:relative;
width:200px;
height:200px;
text-align:center;
vertical-align:middle;
background-color: green;
}
.test p{
position:absolute;
top:50%;
left:50%;
margin:0;
}
.test p img{
margin-top:-50%;
margin-left:-50%;
}

　　#test是img的祖父节点，p是img的父节点。此时无论如何缩放都会保持test中心

2.张鑫旭大神博客中看到

div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;} 
div img{vertical-align:middle;}

　　这里用到了display:tabel-cell;实现了，两列等高，图片大小不固定的 垂直居中。

　　display:tabel-cell 更多的可以用在统一列表登高布局。

3.inner布局

 $(window).resize(function () {
    // console.log('resize');
    var $w = $(window),
      ww = $w.width(),
      wh = $w.height(),
      transform,
      transformMax;
    config.width = ww;
    config.height = wh;
    var scale = Math.min(config.width / 320, config.height / 560),
      scaleMax = Math.max(config.width / 320, config.height / 560);
    transform = 'translate(-50%,0%) scale(' + scale + ',' + scale + ')';
    transformMax = 'translate(-50%,-50%) scale(' + scaleMax + ',' + scaleMax + ')';
    $('.page .inner').css('-webkit-transform', transform)
      .css('transform', transform);
    $('.page .inner-fill').css('-webkit-transform', transformMax)
      .css('transform', transformMax);
  }).resize();

　　

.inner{
position:absolute;
top:50%;
left:50%;
}

　　绝对中心