html垂直居中ver,css 完美垂直居中解决方案兼容ie8以上等其他浏览器

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%为自身尺寸的一半 */

}