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>

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2079

发表评论

电子邮件地址不会被公开。 必填项已用*标注