我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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>

苏南大叔:css布局,如何利用margin负数实现水平居中和竖直居中? - 默认值
css布局,如何利用margin负数实现水平居中和竖直居中?(图5-2)

这里注意有个特殊设置:

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

水平居中

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

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

苏南大叔:css布局,如何利用margin负数实现水平居中和竖直居中? - 水平居中
css布局,如何利用margin负数实现水平居中和竖直居中?(图5-3)

竖直居中

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

使用top的基础是divabsolutefixed的。距离顶部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>

运行截图如下:

苏南大叔:css布局,如何利用margin负数实现水平居中和竖直居中? - 水平和竖直都居中
css布局,如何利用margin负数实现水平居中和竖直居中?(图5-5)

结束语

更多css小技巧,请参考文字:

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

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

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

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