position:absolute 按钮左右分布：left:0 和 right:0 以及雪碧图

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

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11174145.html