使元素水平垂直居中的实现方法
方案一:
知晓元素的宽高的情况下,可以使用:
div{ position:absolute; left:50%; top:50%; margin-top:0.5*height; margin-left:0.5*width; }
这种方法兼容性更好,但是使用上不够简便,而且需要明确知道元素的自身宽高。
方案二:
不知道元素的宽高的解决办法:
div{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
这种办法无需知道元素自身的宽高(但被设置的元素需要是图片这类的自带宽高的元素),使用上很方便,处理大批量的不确定尺寸的图片类元素时会更有优势,但对旧版的IE支持不好。所以在兼容性上需要谨慎。
无论使用哪种方式,如果要使浮动的元素相对父元素居中,则父元素的position需要为absolute或者relative,否则,浮动的元素会相对窗口居中。