.container{position:relative;}.center{position：绝对的；顶部：50%；左：50%；transform:translate(-50%,-50%);}点我看demo-1，好像挺容易理解的，就是先把元素向下移动父元素高度的50%，然后再移动上升到自身高度的50%。严格来说，这种方式也同时实现了水平居中。如果不需要，去掉left:50%，改成transform:translateY(-50%)transform。浏览器兼容性从上图可以看出，国内90%左右的设备都支持。方法二：flexlayout在需要垂直居中的元素的父元素上添加一个class，.container{display:flex;align-items:center;}点我查看demo-2flex布局能做的太多了，就做垂直居中真是大材小用。Flex布局浏览器兼容性从上图可以看出，国内90%左右的设备都可以支持。