CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。

common.css

<style type="text/css">
  ul,li{list-style:none;margin:0;padding:0;}
  body{
    background:#888;
    font-size:14px;
    color:#F2F2F2;
    text-shadow:1px 0 0 #101011;
  }
  .item{
    padding: 0 10px;
    border-radius: 2px;
    box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
    background: #555;
    background: -webkit-linear-gradient(top,#434345,#2f3032);
  }
</style>

View Code