1.首先是要使盒子为display:box | -webkit-box| -moz-box
2.设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。
3.box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。
4.box-align的取值有：start(居上)，center(居中)，end(居下)。
如果我们要设置垂直居中的话只需要将这两个属性的值都设置为center即可
一、用margin负值，这种方法适合div的宽高固定。 position:absolute left:50% top:50% margin-left:-宽度的一半 margin-top:-高度的一半； 二、使用css3新属性translate，这个不需要固定宽高。 position:absolute left:50% top:50% transform:translate(-50% -50%) 三、使用flex布局，这个也不需要固定宽高。但是需要在父容器上面设置 display:flex justify-content:center align-items:center 四：将上下左右全设为0. position:absolute top:0 bottom:0 left:0 right:0 margin:auto 这样全部设为0后会拉伸图片充满父容器，然后margin设为auto会自动填充上外边距，就能实现居中。有以下三种方法：
1、设置div的height和line-height值设置为相同的数值，只需要一个div即可。
2、设置父级div样式的display:table，并设置子div样式的display:table-cell、vertical-align:middle，此时需要一个父级div和一个子级div。
3、设置父级div样式为display:box、box-pack:center、box-orient:vertical，记得要在前面加上浏览器前缀，例如chrome浏览器为-webkit-box-pack:center、-webkit-box-orient:vertical，需要一个父级div和一个子级div。
