css 实现div盒子的居中(一) 持续更新

最新推荐文章于 2024-07-06 00:15:59 发布

桃花朵朵开3

最新推荐文章于 2024-07-06 00:15:59 发布

阅读量1.1k

点赞数 4

分类专栏：小白文章标签：定位 css css3

本文链接：https://blog.csdn.net/qq_48445738/article/details/107136712

版权

小白专栏收录该内容

57 篇文章 0 订阅

订阅专栏

在使用div+css布局的我们总会遇到需要把盒子模型居中的案列那么怎么才能让下面的盒子居中现在的css代码是这样的

<style>
        div{
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
        }
</style>

在这里插入图片描述

那么我们现在给他居中吧在css里面添加 margin: auto; 现在它就居中了

在这里插入图片描述

所以我们今天的教程到此结束了感谢观看！！！

当然没有！！最重要当然是垂直居中啦！

话不多谁直接上代码（我目前所知道的几个欢迎补充我也是小白大佬勿喷）

1. 第一种

利用定位 position 来垂直居中首先我们把html body的高度设置成100% 这样盒子确保盒子有高度可以让我们垂直然后我们在盒子里面使用相对定位

 html,body{
            width: 100%;
            height: 100%;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
            margin: auto;
            position: relative;

        }

在这里插入图片描述
然后好像没什么表化其实还没完这个时候我们要用到定位里面的偏移来实现也就是 top left 这些属性那我们先给它加个距离顶部50% 试试 top：50%

在这里插入图片描述

我们可以明显看到当前div并没有在垂直的地方所以这个时候我们还要减去半个盒子的高度也就是加入margin-top:-200px 这样我们就得到了垂直居中的盒子

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子居中</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        div{
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
            margin: auto;
            position: relative;
            top: 50%;
            margin-top:-200px

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这是用相对定位做的一个居中也是使用较多的居中公式就是 （当前视口的宽度/2 - 盒子模型宽度/2） 还有很多居中方式后续再说我继续划水了各位再见

桃花朵朵开3

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 实现div盒子的居中(一) 持续更新

在使用div+css布局的我们总会遇到需要把盒子模型居中的案列那么怎么写才能让下面的盒子居中现在的css代码是这样的<style> div{ width: 400px; height: 400px; background-color: cornflowerblue; }</style>那么我们现在给他居中吧在css里面添加 margin: auto; 现在它就居中了
复制链接

扫一扫