在制作网页的过程中，我们有时需要使用CSS来实现页面元素居中显示。该如何实现呢？

    使用CSS实现页面元素居中显示的有以下4种方法：
  1.使用自动外边距实现居中
    CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div. 需要特别注意的是，必须为该容器指定宽度 。
如：<div id="wrapper"></div>
   #wrapper{
   width:750px;
   margin:0 auto;
   }
 
 2.使用text-align实现居中
    另一种实现元素居中的方法是使用text-align属性，将该属性设置为center并应用到body元素上即可。即 body{text-align:center; }。这样设置后，body的所有子孙元素都会被居中显示。body里面的子孙如果不用居中显示，则需另外设置text-align.如body中有p标签中的元素需要居左显示。使用p{text-align:left;}即可实现。
 
  3.组合使用自动外边距和文本对齐
    因为文本对齐居中方式有着良好的向下兼容性，则自动外边距方式也被大多数当代浏览器支持。将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持。
   如：<div id="wrapper"></div>
   body {
 
    text-align:center;
   }
    #wrapper{
    width:750px;
    margin:0 auto;
    text-align:left
    }
  
 4.负外边距解决方案
    负外边距解决方案不是仅仅为元素添加负外边距那么简单。 这种方法需要同时使用绝对定位和负外边距两种技巧 。
    此方案的具体实现方法为：首先创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边缘50%的位置。这样，
    该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这样既可将该容器固定在页面水平方向的中点。
 
  如<div id="wrapper"></div>  #wrapper{
   width:750px;
   left:50%;
   position:absolute;
   margin-left:-325px;
  }
  ps :在计算时要格外小心，无论是内边距还是边框都要计算在容器宽度中，否则将不会得到期望的结果。