居中问题总结

2024年5月17日 92次阅读 来源: 山外de楼

今天看到一道面试题，怎么样一个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属性进行位置的修正

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

    原文作者：山外de楼
    原文地址: https://segmentfault.com/a/1190000008603319
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞