居中，圆角及图片整合

一、元素在屏幕窗口水平垂直都居中

1.定宽高(已知大小)的元素在屏幕窗口水平垂直都居中

语法：元素

{
	 width:数值+单位;
	 height:数值+单位;
	 position:fixed;
	 top:50%;
	 left:50%;
	 margin-left:-width/2+单位;
	 margin-top:-height/2+单位;
}

2.不定宽高(未知大小)的元素在屏幕窗口水平垂直都居中

语法：元素

{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}

二、子元素在父元素中水平垂直都居中

1.定宽高(已知大小)的子元素在父元素中水平垂直都居中

语法：

父元素{position:relative;}
      子元素{
      	  width:数值+单位;
      	  height:数值+单位;
      	  position:absolute;
      	  left:50%;
      	  top:50%;
      	  margin-left:-width/2+单位;
      	  margin-top:-height/2+单位;
      }

2.不定宽高(未知大小)的子元素在父元素中水平垂直都居中

语法：

父元素{position:relative;}
      子元素{
      	   position:absolute;
      	   top:0;
      	   right:0;
      	   bottom:0;
      	   left:0;
      	   margin:auto;
      }

扩展：

父元素{display:table-cell;text-align:center; vertical-align:middle;}

注：如果子元素是块元素，需要转换为display:inline-block;

display:table-cell;将元素转换为表格单元格形式即td形式

三、圆角

语法：border-radius:数值+单位;

1.设置一个值

border-radius:20px;  四个方向圆角均为20px

2.设置两个值

border-radius:30px 5px;  

第一个值代表左上和右下为30px，第二个值代表右上和左下为5px

3.设置三个值

border-radius:30px 0 5px;

第一个值代表左上为30px，第二个值代表右上和左下为0，第三个值代表右下为5px

4.设置四个值

border-radius:60px 30px 10px 0;

按照顺时针方向依次为左上60px,右上为30px,右下为10px，左下为0

5.还可以单独设置某个方向的圆角

border-top-left-radius:30px;

(左上角，还可以更改为其他)

6.还可以使用/表示第二组值

border-radius:60px/30px;

斜杠前的第一组值代表水平半径，斜杠后的第二组值代表垂直半径

7.单独设置某个方向圆角水平和垂直半径不相同

border-top-left-radius:30px 60px; (30为水平半径，60为垂直半径)

8.将容器或图片设置为圆

语法:border-radius:50%;

注；前提容器或图像必须宽高相等

四、图片整合技术（也叫作精灵图，雪碧图，滑动门技术）

1.概念（css sprites）

图片整合技术是指将多张图片整合到一张背景图中，通过background-position属性来实现图片的位置变化。

2.优势

使用图片整合减少了对服务器的请求次数，加快了页面的加载速度，减小了图片体积，达到了网站性能的优化