@设置图片上下居中和左右居中方法：
---img相对div居中问题，在div中设置text-align:center;即可。 1，左右居中第一种方法： 设置父元素内文字居中即可让图片居中。 element{ text-align:center; } 2，左右居中第二种方法： 设置图片为块级元素，设置左右margin为auto即可让图片居中。 img{ display:block;margin-left:auto;margin-right:auto; }
3，设置图片上下居中：
vertical-align: bottom;设置元素的垂直对齐方式。
--如下实例：垂直对齐一幅图像：
img
{
vertical-align:text-top; //很多浏览器，没有效果，不建议加这种属性
}
！！！上边的方法很多浏览器中设置没有效果！！！。
（1）最简单的解决方法：
---直接设置margin-top属性，如果有psd的话，直接用faststone capture测量距离，然后设置属性即可。
---或者计算出margin-top距离：（外层div元素高度-内层居中元素）/2=内层居中元素margin-top的属性
！！！垂直居中一般分两种情况！！！：
1.图片宽高固定，这种情况很简单。
水平居中：就在图片的css中加 dispaly:block;margin:0 auto; 垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。2.图片高度未知，这个布局比较难实现。一般我是用js做的。 水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto; 垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。 曾经研究过网上的很多方法，个人觉得这个是最有效的了。
@设置文字上下居中和左右居中方法：
养成一个习惯，写完高度height，就写line-height，文字就会上下居中显示了。text-align：center文字就会左右居中显示。margin:auto设置后，元素对象就会居中显示。
@让所有元素居中方法：
所有一切都垂直居中 要将所有元素垂直居中，太简单了： html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } 看，是不是很简单。 注：在IE11中要小心flexbox。