CSS垂直居中的几种方式 ----- 小白变色记
在学习了这么久，整理了常接触的一些垂直方法：
div垂直居中
场景设定：让一个50px*50px的div在一个200px*200px的div中垂直居中。如下图所示：
左边代码：
<style>
#div1 {
width: 200px;
heigth: 200px;
border: 1px solid red;
}
#div2 {
width: 50px;
heigth：50px;
background-color: #aqur;
}
</style>
<body>
<div id=’div1’>
<div id=’div2’></div>
</div>
</body>
方法一：绝对定位
<style>
#div1 {
width: 200px;
heigth: 200px;
border: 1px solid red;
position: relative;
}
#div2 {
width: 50px;
heigth：50px;
background-color: #aqur;
position: absolute;
margin: auto;
left: 0;
rigth: 0;
top: 0;
bottom: 0;
}
</style>
<body>
<div id=’div1’>
<div id=’div2’></div>
</div>
</body>
知识拓展：position定位 --- > 规定元素的定位类型
说明：这个属性定义建立元素布局所用的定位机制。如何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值：
absolute : 生成绝对定位元素，相对于static定位以外的第一个父级元素定位。
元素的位置通过‘left’‘top’‘right’‘bottom’属性进行规定。
fixed ：生成绝对定位元素，相对于浏览器窗口进行定位。
元素的位置通过‘left’‘top’‘right’‘bottom’属性进行规定。
relative：生成相对定位元素，相对于其正常位置进行定位。
因此，‘left：20px’会向元素的left位置添加20px。
static：默认值。没有定位，元素出现在正常的流中。
inherit：规定应该从父元素继承position属性的值。
方法二：设置外边距
<style>
#div1 {
width: 200px;
heigth: 200px;
border: 1px solid red;
}
#div2 {
width: 50px;
heigth：50px;
background-color: #aqur;
position: relative;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // 25px为width的一半；（外边距为自身宽高的一半）。
}
</style>
<body>
<div id=’div1’>
<div id=’div2’></div>
</div>
</body>
如果未知容器的宽高，利用transform属性，代码如下：
#div2 {
width: 50px;
heigth：50px;
background-color: #aqur;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); // 向左上角移动自身宽高的一半。
}
知识点：transform属性（CSS3） ---- > 元素的2D或3D的转换
说明：该属性允许我们对元素进行旋转、缩放、移动或倾斜。
其不同的值会单独做一个整理。
方法三：通过设置容器的flexbox居中方式
<style>
#div1 {
width: 200px;
heigth: 200px;
border: 1px solid red;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
#div2 {
width: 50px;
heigth：50px;
background-color: #aqur;
}
</style>
<body>
<div id=’div1’>
<div id=’div2’></div>
</div>
</body>
知识点：flex布局
背景：网页布局是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案---Flex布局，可以简便，完整，响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全的使用这项功能。
Flex布局是什么？
Flex是Flexible Box 的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性。
任何元素都可以指定为flex布局。行内元素也可以使用flex布局。
注意，设为flex布局以后，子元素的float、clear和vertical-align属性会失效。
具体详细的将会在下次做整理。
文字垂直居中
场景设定：让一个文本内容元素在一个200px*200px的div中垂直居中。
左边代码：
<style>
#div1 {
width: 200px;
heigth: 200px;
border: 1px solid red;
}
</style>
<body>
<div id=’div1’>
<span>张世平</span>
</div>
</body>
方法一：line-heigth