第二种盒子居中方式
利用vertical-align: middle; 这个属性来做
首先我们来看原来的效果
<!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%;
}
.div1{
width: 200px;
height: 200px;
background-color: cornflowerblue;
margin: auto;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
那么现在我们现在给这个div元素添加vertical-align: middle;属性
添加后并没有效果
这个时候我们需要给个height为100%参照物给这个盒子 并且也要有 vertical-align: middle;属性 它才能对齐
<!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%;
/* 因为变成了行块盒所以只能用文本对齐方式去水平居中了 */
text-align: center;
}
.div1{
display: inline-block;
/* margin: auto; */
width: 200px;
height: 200px;
background-color: cornflowerblue;
vertical-align: middle;
}
.div2{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="div2"></div>
<div class="div1"></div>
</body>
</html>
这样我们就得到了水平和垂直方向的效果 具体原因有点复杂 我也不是很懂 感兴趣的小伙伴 可以去查查相关的文档 好了再见