我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在css布局中有很多margin取负数的案例，其中大多数时候就是为了实现居中。那么，本文中苏南大叔就说一下这个margin为负数的布局小技巧。

苏南大叔：css布局，如何利用margin负数实现水平居中和竖直居中？ - margin负数方案
css布局，如何利用margin负数实现水平居中和竖直居中？（图5-1）

苏南大叔的程序如此灵动博客，记录苏南大叔高兴写的内容。测试环境：谷歌浏览器。

主角div

本文的主角div就是个平平常常的框框，宽高都是60px。它有几个影分身，要实现几个影分身在网页的位置水平居中和竖直居中。

<style>
div{
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    display: absolute;
    position: fixed;
}
div.n1{
    background-color: red;
}
</style>
<div class="n1">默认</div>
HTML

苏南大叔：css布局，如何利用margin负数实现水平居中和竖直居中？ - 默认值
css布局，如何利用margin负数实现水平居中和竖直居中？（图5-2）

这里注意有个特殊设置：

display: absolute;
position: fixed;
CSS
  • display: absolute让元素可以脱离文档流。但是，如果父元素存在display:relative的话，会捕获它。
  • position: fixed让元素可以固定在某个位置。这个要配合left、right、top、bottom等属性设置。

水平居中

div.x{
    left: 50%;
    margin-left: -30px;
}
CSS

使用left的基础是div是absolute和fixed的。距离左侧50%后，再向左侧移动【一半的宽度】就实现水平居中了。

苏南大叔：css布局，如何利用margin负数实现水平居中和竖直居中？ - 水平居中
css布局，如何利用margin负数实现水平居中和竖直居中？（图5-3）

竖直居中

div.y{
    top: 50%;
    margin-top: -30px;
}
CSS

使用top的基础是div是absolute和fixed的。距离顶部50%后，再向顶部移动【一半的高度】就实现顺直居中了。

苏南大叔：css布局，如何利用margin负数实现水平居中和竖直居中？ - 竖直居中
css布局，如何利用margin负数实现水平居中和竖直居中？（图5-4）

完整代码

<style>
    div {
        box-sizing: border-box;
        width: 60px;
        height: 60px;
        display: absolute;
        position: fixed;
    }
    div.n1 { background-color: red; }
    div.n2 { background-color: gray; }
    div.n3 { background-color: yellow; }
    div.n4 { background-color: pink; }
    div.x {
        left: 50%;
        margin-left: -30px;
    }
    div.y {
        top: 50%;
        margin-top: -30px;
    }
</style>
<div class="n1">默认</div>
<div class="n2 x">x轴居中</div>
<div class="n3 y">y轴居中</div>
<div class="n4 x y">x轴y轴都居中</div>
HTML

运行截图如下：

苏南大叔：css布局，如何利用margin负数实现水平居中和竖直居中？ - 水平和竖直都居中
css布局，如何利用margin负数实现水平居中和竖直居中？（图5-5）

结束语

更多css小技巧，请参考文字：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css