css 完美垂直居中解决方案兼容ie8以上等其他浏览器
DIV水平垂直居中
#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
width:300px;
height: 400px;;
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
background: #F0E68C;
}
#inner {
#position:relative;
#top:-50%;
}
水平居中
水平居中
水平居中
水平居中
//显示浏览器版本
document.getElementById(‘ver‘).innerHTML = navigator.userAgent;
移动端的写法
DIV水平垂直居中
#middle {
width:30%;
height: 10rem;
display:table-cell;
vertical-align:middle;
background: #F0E68C;
}
水平居中
水平居中
水平居中
水平居中
ps:不能用绝对定位否则失效(可以加到外面一层)
还有个绝对定位居中的方法
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
原文:https://www.cnblogs.com/newmiracle/p/11856427.html