1、准备好一个空的html结构的文档。
2、接下来要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。
3、接下来就在div中添加内容，如下图所示，运行后会发现内容偏向于左上角。
4、给div设置水平居中，如下图所示，并且设置行高为div的高度，会发现它水平垂直居中了。
5、让其display属性为table-cell，知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性。
6、运用display转化后会发现margin的auto属性不起作用了。
普通居中方法：margin：0 auto；就可以实现。应该是样页面的一个DOM居中吧！就用相对定位就可以了。
下面是个小例子：
<body><div id="div" style="width:100px height:100px background:#ccc display:none"></div>
<input type="button" value="click me" id="btn" />
</body>
<script>
var oBtn = document.getElementById('btn')
var oDiv = document.getElementById('div')
oBtn.onclick = function(){
oDiv.style.cssText = 'width:100px height:100px background:#ccc top:50% left:50% position:absolute margin-left:-50px margin-top:-50px display:block'
}
</script>
cssText 需要将原样式清空后再补填样式。
主要是用样式的定位来做。你可以通过页面的宽度和高度去计算。
1. 兼容性问题：getElementsByClassName 在IE不支持2. offsetHeight，scrollHeight，clientHeight , style.height, height 属性都要考虑
3. 垂直居中：left + top + height + 窗口参照 决定
