zoukankan      html  css  js  c++  java
  • css 完美垂直居中解决方案兼容ie8以上等其他浏览器

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

    <pre>
    <!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 {
    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>
    </pre>


    移动端的写法

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

    #middle {
    30%;
    height: 10rem;
    display:table-cell;
    vertical-align:middle;
    background: #F0E68C;
    }

    </style>
    </head>
    <body>
    <div id="middle">
    水平居中</br>
    水平居中</br>
    水平居中</br>
    水平居中</br>
    </div>
    </body>
    </html>
    </pre>


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

    还有个绝对定位居中的方法
    <pre>
    .element {
    600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    }
    </pre>

  • 相关阅读:
    find 以及linux 和windows 文件互传
    27 关于Object类 -- equals()
    26 super关键字
    25 访问修饰符限定词
    24 继承 子类中方法重写
    23 static 关键字
    22 包(package)来解决不同包下同名文件的冲突问题
    21 封装(get,set方法)
    20 带参构造方法(this关键字)
    19 无参构造方法
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11856427.html
Copyright © 2011-2022 走看看