在使用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) 还有很多居中方式 后续再说 我继续划水了 各位再见