要实现例如弹窗绝对的方法，以往我们使的是设定元素宽高，然后用css:

.xx{
…
width: 200 px;
height: 300 px;
top:50%;
left:50%;
margin-left: -100px; // width / 2取负值
margin-top: -150px; // height /2 取负值
…
}

这样的方法问题在于内容的高度很可能是不确定的，所以还得借助js去获取高度再设定margin-top值之类…

但其实css3已经完美实现，只需要稍改动一下：

.xx{
…
top:50%;
left:50%;
transform:translate(-50%,-50%);  //替代原先设定的margin负值
…
}

对，就是用transform:translate(-50%,-50%); 完美地替代之前margin负值，然后再要不用头痛内容变化导致容器宽高不定啦!

其他方法：

table布局方案：

.parent{
…
display: table;
…}

.parent .child{
…
display: table-cell;
vertical-align: middle;
text-align: center;
…}

.parent .child .xx{
…
display:inline-block;
…}

flex布局方案：

.parent{
…
display: flex;
align-items: center;
…}
.parent .child{
…
}