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能够兼容）