问题：把两个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