文本垂直居中可以通过设置height等于line-height来实现;
缺点:此方法不适用于两个嵌套div的垂直居中
- line-height
- margin-top
(外层div的高 - 内层div的高 )/ 2 = 值;
将得到的值设置给内层div的margin-top
注意:假如内层div的高是由内容撑开决定的,此时则需用JS动态获取内层div高度,
var o = document.getElementById('div1');
var h = o.offsetHeight;//获取盒子自身实际高度(内容高度height+内边框*2+边框*2)
扩展:
var div1 = document.getElementById("div1")
var contentHeight = window.getComputedStyle(div1).height //输出 '60px'
box.clientHeight //输出110 (内容高度+padding * 2)