css 完美垂直居中解决方案兼容ie8以上等其他浏览器详解编程语言

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

 !DOCTYPE html 
 html 
 head 
 title DIV水平垂直居中 /title 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 style type="text/css" 
 #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%;
 

 }
 /style 
 /head 
 body 
 div id="outer" 
 div id="middle" 
 div id="inner" 
 水平居中 /br 
 水平居中 /br 
 水平居中 /br 
 水平居中 /br 
 /div 
 /div 
 /div 
 /body 
 /html 
 script type="text/javascript" 
 //显示浏览器版本
 document.getElementById(ver).innerHTML = navigator.userAgent;
 /script 

移动端的写法

 !DOCTYPE html 
 html 
 head 
 title DIV水平垂直居中 /title 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 style type="text/css" 
 
 #middle {
 width:30%;
 height: 10rem;
 display:table-cell;
 vertical-align:middle;
 background: #F0E68C;
 }
 
 /style 
 /head 
 body 
 div id="middle" 
 水平居中 /br 
 水平居中 /br 
 水平居中 /br 
 水平居中 /br 
 /div 
 /body 
 /html 

ps:不能用绝对定位否则失效(可以加到外面一层)

还有个绝对定位居中的方法

.element {
 width: 600px; height: 400px;
 position: absolute; left: 50%; top: 50%;
 transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}

18893.html