CSS中的居中总结

重新更新！！！

在CSS中由于我还没复习到定位，暂且就用三个居中。

第一个是垂直居中，这个我觉得是最重要的一个方法。主要有以下几个问题。

这个居中到底是给谁居中？

答：垂直居中不是给标签使用的，而是标签里面的内容，垂直居中是在父元素中使用属性：line-height:父元素的高度，在下面中，我给父元素设置行高属性，但是他的两个子元素块并没有垂直居中。

但是问题来了，当我给这蓝白子元素里面添加内容时，蓝白元素也没有垂直居中，而是里面的内容居中，这是因为ＣＳＳ中具有继承性，蓝白继承了粉色的行高属性，但是当我使用块元素进行嵌套时发现，比如我在内容身上嵌套了六层div，每层height从200px递增，最大为1600px，那么当我在任何一个div上设置行高，我在离内容最近的div身上设置行高为200px时，那么内容就会在第一div里面垂直居中，如果设置为400px时，他就会在第二个div上垂直居中，可以发现，行高垂直居中只要你的行高和任何一个div相等，他就会把你在那个div中垂直居中。他会把你的内容在任何一个不管多少层的父元素身上，或者子元素。虽然CSS中有继承性，但是这个行高这个不太适合这么解释，我觉得他是给匹配从一开始嵌套的时候到内容位置，只要高度等于行高就给你在满足的哪个div中垂直居中。我又新发现，不管你有没有设置高宽，直接设置行高，他就默认为你生成高100垂直居中。下班

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color: red;
}
.div{
height: 800px;
background-color: black;
}
.div1{
float: left;
height: 400px;
width: 500px;
background-color: pink;
line-height: 200px;
/* text-align: center; */
/* float: left; */
margin: 0 2px;
}
.div11{
height: 200px;
width: 300px;
background-color: aqua;
/* line-height: 300px; */
/* float: left; */
margin: 0 auto;
/* line-height: 500px; */
}
.div12{
height: 200px;
width: 300px;
background-color: white;
line-height: 800px;
/* float: left; */
margin: 0 auto;
/* line-height: 500px; */
}
</style>
</head>
<body>
<div class="div">
1
<div class="div1">
2
<div class="div11">
3
子元素
</div>
</div>
<div class="div1">
2
<div class="div12">
3
<img src="../练手/img/btn.png" alt="">
</div>
</div>
</div>
</body>
</html>