方法一:通过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+ */
}