今天看到一道面试题,怎么样一个div水平垂直居中,当时想到的就是绝对定位+top和left,却忘了再通过margin进行修正,于是拿出css权威指南,重新复习了下定位的知识,写个总结:

一.水平居中

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        margin: 0 auto;
    }
</style>

<div id="box"></div>

auto:浏览器根据剩余空间自动定位距离,当左右都设置为auto的时候,保证左右剩余空间相同,就变成了居中。要注意的是:只对左右设置有用,上下没用,所以不能通过这种方式达到垂直居中目的。

二.水平垂直居中

方式1:

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        margin:auto;
    }
</style>

<div id="box"></div>

首先position绝对定位,再把top right bottom left都巧妙设置成0,最后设置margin为auto,浏览器就自动在div上下和左右都留下相等的间距,达到了水平和垂直都居中的目的。

方式2:

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-100px; /*高度的一半*/
        margin-left: -150px;/*宽度的一半*/
    }
</style>

<div id="box"></div>

top和left都是针对div左上角那个点定位的,所以都设置了50%,相当于把div左上角那个点定位到了浏览器正中间,再通过margin-top和margin-left修正位置。

方式3:

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
</style>

<div id="box"></div>

原理与方式二相同,不同点在于利用css3里面的transform属性进行位置的修正

如果还有其他常用的方式,欢迎在文章下面留言补充,谢谢


款冬
1.5k 声望42 粉丝

前端小小弄潮儿~