今天发现{margin:0 auto}竟然能使固定定位fixed(脱离文档流)(在chrome手机模拟器和chrome浏览器)水平居中。
在我安卓手机(4.2.2)不行。后来改成{margin-left:-定宽/2},于是在安卓手机也可以了……

弹窗垂直水平居中:

方法1:

1
2
3
4
5
6
7
8
9
10
.modal{
position:fixed;
width:250px;
height:100px;
background:#ececec;
left:50%;
top:50%;
margin-left:-125px;
margin-top:-50px;
}

小结:fixed,支持到IE7,IE6不支持。modal定宽定高。

方法2:

1
2
3
4
5
6
7
8
9
10
.modal{
position:fixed;
width:250px;
height:100px;
background:#ececec;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

小结:不支持IE9+,modal不需定宽定高,手机端可用。(发现如果有其他的transform,好像先执行其他的,在移动到中心。)另外,发现{margin:0 auto}:

1
2
3
4
5
6
7
8
9
10
.modal{
position:fixed;
width:250px;
left:0;
right:0;
top:40%;
bottom:auto;
margin:0 auto;
background:#ececec;
}

竟然能使固定定位fixed(脱离文档流)(在chrome手机模拟器和chrome浏览器)水平居中。
在我安卓手机(4.2.2)不行。后来改成{margin-left:-定宽/2},于是在安卓手机也可以了

本文地址: https://lxchuan12.github.io/2016/08/17/20160817-modal-center/