問題：把兩個a標簽按鈕 垂直居中，並且分別把兩個按鈕放在水平左右兩邊頂部
1，祖父元素設定：position:relative
2，把.arrow 設定上下垂直居中 position:absolute; top:50%; margin-top:-20px;
3，因為父級元素已經進行垂直居中定位，所以，只要把 a 標簽進行左右定位即可
a標簽公共樣式.item{ position:absolute;}
這里如果設置left:0，那么.right設置right:0;就無效，如果同時設置:left:0 和 right:0 會先執行left先。
所以這里不設置，直接到.left 和 .right中各自設置left:0; 和 right:0;最合適
4，.left { left:0 } .right { right:0 }
==============================
讀取雪碧圖中的指定圖片：
公共樣式 .item 設置了背景圖片： background: url('../img/ui-slider-arrow.png') no-repeat 0 0;
如果有多個 .item 需要設置，那么直接修改background-position: 0 -20px; 即可。
雪碧圖的讀取基本都是負數坐標。
==============================
<!----對 兩個 a 標簽定位在 .container 的上下垂直居中，並且兩個a標簽一個定位在左，一個定位在右邊 ---->
<div class="container" style="position:relative; width:600px;height:600px;">
<div class="arrow">
<!----a 標簽是圖片輪播的前后按鈕,寬高都是40px----> <a class="left item" href="#l"></a> <a class="right item" href="#r"></a> </div>
</div>
<!----下面是樣式---->
.container {
width: 545px; height: 413px; position: relative; } .arrow { position: absolute; top: 50%; margin-top: -20px; height: 40px; width: 545px; } .arrow .item { position: absolute; width: 40px; height: 40px; display: inline-block; background: url('../img/ui-slider-arrow.png') no-repeat 0 0; }
.left {
left: 0; background-position: -40px 0; }
.right { right: 0; background-position: -40px 0; }
單行居中：height=line-height 上下垂直居中text-align:center; 塊級元素內容左右居中
多行居中：父元素設置 display:table. 且寬度固定子元素設置 display:table-cell. vertical-align:middle;
定位居中一：父元素設置position:relative;子元素設置position:absolute; 全部設置：top:0; bottom:0; left:0; right:0; margin:auto; 上下左右垂直居中。其中如果只設置如下效果又不一樣： top:0;/*不寫也可以，默認頂邊居中*/ right: 0; left: 0; margin: auto; //本元素相對於有relative的祖先元素左右靠頂邊居中。即：設置left=right,margin:auto; 則左右垂直居中。
left: 0; bottom:0;/*默認靠頂邊，指定了bottom:0; 才會靠底邊左右居中*/ right: 0; margin: auto; //本元素相對於有relative的祖先元素左右靠底邊居中。即：設置left=right,margin:auto; 則左右垂直居中。
top: 0; bottom: 0; left:0;/*可以不寫，默認就是靠左邊垂直居中*/ margin:auto; //本元素相對於有relative的祖先元素上下靠左居中，相當於添加left:0;。即：設置top=bottom,margin:auto; 則上下垂直居中。
top: 0; right:0;/*默認靠左邊垂直居中，指定right:0;后才會靠右邊垂直劇中*/ bottom: 0; margin:auto; //本元素相對於有relative的祖先元素上下靠右邊居中。即：
定位居中二：父元素設置position:relative/fixed; 或者父元素是body。子元素設置position:absolute; left:50%; top:50% margin-left:-(子元素寬度的一半); margin-top:-(子元素高度的一半);
固定寬度塊級元素:margin:0 auto; 左右居中。塊級元素的內容:text-align: center; 左右居中。行內元素:vertical-align:middle; 上下居中。
背景圖片垂直居中使用關鍵字，top righ bottom left center 百分比。bakcground: color url() no-repeat center right scrollbackground-position: top; 默認top centerbackground-position: right; 默認right centerbackground-position: bottom; 默認bottom centerbackground-position: left; 默認left center