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%;
}

　　絕對中心