css三种方法实现div在浏览器水平居中

作者

当我们设计一个页面时，经常在中心显示DIV，它相对于页面窗口的水平和垂直方向显示，其实我们的传统解决方案一般都是使用纯CSS来让DIV居中，那么css三种方法实现div在浏览器水平居中大家了解了吗？感兴趣的朋友可以随着小编一起来了解一下！

第一种方法：

CSS Code
复制内容到剪贴板
  1. div {   
  2.   margin: 0 auto;   
  3.   width: 960px;   
  4.  }   

第二种方法（兼容IE）:

CSS Code
复制内容到剪贴板
  1. body { text-align: center; }   
  2.   
  3.   div {   
  4.     margin: 0 auto;   
  5.     width: 960px;   
  6.   }       

第三种方法（不推荐）:

CSS Code
复制内容到剪贴板
  1. div {   
  2.   position: relative;   
  3.   left: 50%;   
  4.   margin-left: –480px;   
  5.   width: 960px;   
  6. }   

以上就是css三种方法实现div在浏览器水平居中，希望对大家学习有所帮助，也希望大家继续支持爱站技术频道！