CSS实现不同情况下的居中

看到影哥空间更新，留作收藏备用 

1. 文本，图片等行内元素的居中(注意这里，父元素的宽度和高度都是已知的):  给父元素设置 text-align:center可保证水平居中, 设置line-height与父元素的height一样即可设置垂直居中中.    例程:

         <style type="text/css">

    .wrap{background:#000; width:500px;height:100px;margin-bottom:10px;color:#fff;text-align:center;line-height:100px;}

        </style>
        <div class="wrap">hello world</div>  

 2. 确定宽度的块级元素的水平居中: 通过设置margin-left:auto和margin-right:auto来实现.
      <style type="text/css">

.test{width:100px;margin-left:auto;margin-right:auto; background-color:grey;}

    </style>

  <div class="test">hello world</div>  
  3.  改变块级元素的display为inline类型，再设定 text-align来居中.
         <style type="text/css">

    .test{text-align:center;}

    .test li{ display:inline; background-color:grey;}

        </style>

  <div class="wrap">

   <ul class="test">

   <li>abc</li>

        <li>abc</li>

   </ul>

   </div>