四种方式：
（1）.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。
.mydiv{ width:200px; height:200px; left:50%; top:50%; margin:-100px 0 0 -100px }
（2）.利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。
.mydiv{ position: absolute; left: 0px; right: 0; top: 0; bottom: 0; margin: auto; height: 200px; width: 200px; }
（3） jQuery实现水平和垂直居中
原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。
$(window).resize(function(){ $(".myblock").css({ position: "absolute", left: ($(window).width() - $(".myblock").outerWidth())/2, top: ($(window).height() - $(".myblock").outerHeight())/2 }); });
在页面加载的时候调用刚刚创建的方法
$(function(){ $(window).resize(); });
（4）使用transform
.mydiv{width: 100px;height: 100px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}
所谓的雪碧图是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分;简单说就是在一整张图片中分割出自己想要的部分，也可理解为图片截取显示（坐标的移动)
（1）.优点
①
减少加载网页图片时对服务器的请求次数；
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
②提高页面的加载速度
sprite技术的其中一个好处是图片的加载时间(在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
（2）.缺点
①在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
②CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css
（1）. 尺寸相关属性
Height：高度
Width：宽度
div{ height: 100px; width: 100px;}
Max-height：
Min-height：
Max-width：
Min-width：
（2）. 隐藏属性的方法
Visibility：后面接hidden，表示仅仅隐藏了内容，却还是存在的
Display：后面接none，把内容都搞没了，且不占位置
Display可以设置元素的显示模式
Inline：可以将块集元素以内联形式显示，且width和height无效，其空间大小取决于元素的内容。
Inline-black：可以将块集元素以内联形式显示，同时兼具块集元素的某些特征，比如使用width和height属性设置大小
i. 块集元素可以转换为内联元素，转换方式是定义display=inline-black;
ii. 内联元素可以转换为块集元素，转换方式是定义display= black;
li{ display: inline-block; width: 300px; height: 300px; background-color: green;}span{ width: 200px; height: 200px; display: block; background-color: blue;}
（3）.定位
定位的方式有：static、fixed、relative、absolute
Static：静态定位（默认）
无定位，元素正常出现了流中，不受上下左右属性影响
<style> div{ width: 200px; height: 200px; background-color: yellow; position: static; }</style>
Fixed：动态定位
#div1{ width: 200px; height: 200px; background-color: blue; /*left: 50px;*/ /*top: 50px;*/ position: fixed; /*z-index: 3;*/}#div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: fixed; /*z-index: 2;*/}
从结果看出，fix定位可以将div从流中取出来，重新定位取决于left、top。重新定位之后会出现重叠，可以用z-index来实现谁在上面，大的在上。
Relative：相对的
#div1{ width: 200px; height: 200px; background-color: blue; /*left: 50px;*/ /*top: 50px;*/ position: static; /*z-index: 3;*/}#div2{ width: 200px; height: 200px; background-color: yello left: 50px; top: 30px; position: relative; /*z-index: 2;*/}#div3{ width: 200px; height: 200px; background-color: yello left: 100px; top: 60px; position: relative; /*z-index: 2;*/ }<div id="div1"></div><div id="div2"></div><div id="div3"></div>相对定位可以跳出流，不会影响别的定位Absolute：绝对的#div1{ width: 200px; height: 200px; background-color: blue; /*left: 50px;*/ /*top: 50px;*/ position: static; /*z-index: 3;*/}#div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: absolute; /*z-index: 2;*/}#div3{ width: 200px; height: 200px; background-color: yellow; left: 40px; top: 20px; position: absolute; /*z-index: 2;*/}
