前端学习笔记二——CSS常见面试题盒子水平居中

最新推荐文章于 2024-04-19 22:47:36 发布

夜`尽、祭

最新推荐文章于 2024-04-19 22:47:36 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_43463555/article/details/115250149

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

盒子水平垂直居中的方法

一、定位1

<style>
    .box1{
        width: 1000px;
        height: 1000px;
        overflow: hidden;
        background: blue;
    }
    .box{
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        background: red;
        text-align: center;
        line-height: 100px;
    }
    .box1{
        position: relative;
    }
    .box{
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -100px;
        margin-left: -100px;
    }
</style>
<body>
    <div class="box1">
    <div class="box">
        盒子
    </div>
    </div>
</body>

二、定位2


    .box1{
        position: relative;
    }
    .box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom:0 ;
        margin: auto;
    }

三、定位3


    .box1{
        position: relative;
    }
    .box{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

四、flex弹性布局

.box1{
        display: flex;
        justify-content: center;
        align-items: center;
    }

五、table-cell

 .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .box{
       display: inline-block;
    }

六、JS实现

夜`尽、祭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记二——CSS常见面试题盒子水平居中

目录盒子水平垂直居中的方法盒子水平垂直居中的方法一、定位1<style> .box1{ width: 1000px; height: 1000px; overflow: hidden; background: blue; } .box{ box-sizing: border-box; width: 200px; height: 200px;
复制链接

扫一扫