zoukankan      html  css  js  c++  java
  • div居中问题

    一道面试题,如下:

    第一问:如何居中div?

    本来自己的想法是,直接在div上设置margin:auto;发现最后只是水平居中,竖直方向上并没有居中。

    方法①  最坑的方法。

    知道屏幕的height和width值,通过设置左边和顶部的margin值,达到居中的效果。(Ps:最蠢但是挺实用的方法,哈哈哈)

    方法②  position属性

    将div设置为position:absolute;以body为父元素进行定位,代码如下:

    div{height: 100px;width: 100px;background: red;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right: 0;
            margin: auto;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>

    此时,div在屏幕中央显示。(IE8以上兼容

    方法③  position+margin负值

    div{height: 100px;width: 100px;background: red;
            position: absolute;
            top:50%;
            left:50%; 
            margin: -50px 0 0 -50px; //两个值分别为高度的一半和宽度的一半
        }

    此时,也能得到相同的效果。(此方法的神奇之处在于IE6能够兼容

  • 相关阅读:
    Android Native Hook技术(一)
    Android Native Hook技术(二)
    Dalvik源码阅读笔记(一)
    Dalvik源码阅读笔记(二)
    Android反调试笔记
    /dev/mem可没那么简单
    jenkins使用邮件功能
    docker 安装 oracle
    jstack
    docker network
  • 原文地址:https://www.cnblogs.com/hcy1996/p/5883009.html
Copyright © 2011-2022 走看看