标签：
在手机排版时，内容绝对居中用到的特别频繁。
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%;
}
绝对中心
标签：
原文地址：http://www.cnblogs.com/forgere/p/5487510.html
