这样很容易实现垂直居中，但是这个必须知道自己的高度，才能使用margin-top:-100px达到目标。优点：写法简单，兼容性好缺点：必须知道目标元素的高度，高度必须是固定值，否则样式会随之改变，不够灵活2.top50%;transforms:translateY(-50%)这个方法和上面的原理一样，只是把向上的位移改为transforms:translateY.box{positon:absolute;宽度：200px；高度：200px；背景：橙色；顶部：50%；transforms:translateY(-50%)}由于使用了css3的新特性，对浏览器的要求比较高。优点：写法简单，适应性好缺点：兼容性一般，不支持ie8浏览器3.margin:auto你可能用过margin:0auto来实现div的水平居中。其实也可以垂直居中。.box{位置：绝对；宽度：200px；高度：200px；/**必须指定宽高**/background:orange;顶部：0；底部：0；margin:auto}是不是很神奇？但是需要注意一点，这个必须指定宽高，否则top:0;bottom:0会填满容器。优点：写法简单，适应性好，兼容性好缺点：需要指定元素的宽高。如果目标元素的宽高发生变化，可以使用js辅助生成4.vertical-align:middle这个方法是我最喜欢使用的一个方法，基本满足以上所有要求。主要是利用多个元素vertical-align:middle来实现垂直居中。由于需要多个元素才能生效（否则一个元素应该对齐谁），所以添加一个i标签