CSS盒子居中三种方法

前言

CSS盒子居中三种方法

CSS盒子居中,我觉得是很有必要学习一下的。特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化!

1.常规方法

常规方法只需要给盒子设置宽高,利用外边距让它居中!

<div class="box1">常规方法</div>
.box1{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: pink;
}

2.奇淫技巧

奇淫技巧利用定位元素。将祖先元素设为相对定位,子级元素设为绝对定位。left设置为50%;margin-left设置为-宽度的一半。但是必须得设置宽度,并且得知道宽度值为多少!

<div class="bigbox2">
    <div class="box2">奇淫技巧</div>            
</div>
.bigbox2{
    position: relative
}
.bigbox2 .box2{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

3.奇淫技巧升级版

奇淫技巧利用定位元素和CSS transform属性。将祖先元素设为相对定位,子级元素设为绝对定位。left设置为50%;transform设置为translate(-50%);优点:不需要知道宽度值为多少!

<div class="bigbox3">
    <div class="box3">奇淫技巧升级版</div>            
</div>
.bigbox3{
    position: relative;
}
.bigbox3 .box3{
    width: 200px;
    height: 200px;
    background-color: lightseagreen;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

在线代码

GitHub:css-box-model-center
GitHub演示页面:https://chengzhihui99.github.io/css-box-model-center/

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

  Previous post Linux——WEB服务
Next post   Linux服务相关文件总结

添加新评论

已有 7 条评论

  1. 会css的人最帅了。

  2. 感谢分享

  3. 怎么简单怎么来

    1. 嘿嘿,怎么方便怎么来,不过第三种方式应用场景确实还是比较多的!

  4. 鸟叔有故事

    1. 来,喝酒~!

  5. 学习了!! 大佬要不要做个友链呢?