使元素水平垂直居中的实现方法

方案一:

  知晓元素的宽高的情况下,可以使用:

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,否则,浮动的元素会相对窗口居中。