纯CSS3,无JS实现不定宽高水平垂直居中，最优方法。

方法一：通过transform实现不定宽高元素水平垂直居中

.example1{position: absolute;top: 50%;left: 50%;z-index: 3;-webkit-transform:translate(-50%,-50%);border-radius: 6px;background: #fff;}

方法二：通过flex布局实现不定宽高元素水平垂直居中

.example2{display: -webkit-flex;justify-content: center;align-items: center;}

简单分析：

方法一；

先把元素设定为绝对定位，

然后通过 top 和 left 把元素的左上点移动到屏幕的中间，

最后通过 transform 属性，根据元素自身大小，相对向左和向上移动自身宽高的50%。

从而实现了不定宽高元素的水平垂直居中。

方法二：

设置父级元素 display 为 flex;

justify-content 设定子元素水平居中；

align-items 设定子元素垂直居中。

提醒，使用方法二时需要考虑浏览器兼容性，

对于PC端，一般chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持，显示的是顺序排列下来的宽度100%的模块。


对于移动端：
（1）上述代码iOS的原生safari浏览器是支持的；UC浏览器支持的很好；微信浏览器不支持（测试机型：苹果4s）


（2）安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持

兼容浏览器写法：

.container{  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  display: -moz-box; /* Firefox 17- */  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  display: -moz-flex; /* Firefox 18+ */  display: -ms-flexbox; /* IE 10 */  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */  }