使div元素居中显示（通过css控制元素居中）

参考：https://www.cnblogs.com/rubykakas/articles/7992662.html

1. 使整个<div>元素“水平”居中

简介：让整个<div>元素，在其父元素内，水平居中
步骤：必需先设置<div>的“宽度”和“高度”，然后再设置 margin:0 auto，最终呈现<div>水平居中

div{
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

缺点：必需设置div的“宽度”

2. 使整个<div>元素“水平”和“垂直”居中

简介：让整个<div>元素，在其父元素内，水平和垂直都居中
步骤：必需先设置<div>的“宽度”和“高度”，然后使用定位position，最后使用margin进行偏移调整，最终呈现<div>水平和垂直居中

div{
    width: 100px;
    height: 100px;
    position: absolute;  /* 相对定位：相对于“最近的定位祖先元素（参照物）”进行定位 */
    left: 50%;  /* 从左往右偏移,偏移量为“参照物”宽度的50% */
    top: 50%;   /* 从上往下偏移,偏移量为“参照物”高度的50% */
    margin: -50px 0 0 -50px;  /* 将该元素"向左"和"向上"偏移,向左偏移量为该元素宽度的一半,向上偏移量为该元素高度的一半 */
}

缺点：必需设置div的“宽度”和“高度”，通过使用position、left、top进行定位和偏移，最后使用margin进行“偏移调整（调整多少需要自己根据该div元素的宽度和高度计算出来）”

3. 使整个<div>元素内的文本，“水平”和“垂直”居中（text-align + line-height）

① text-align 属性规定（块级）元素内文本的水平对齐方式。

② line-height = height，行高等于元素高度，用来实现垂直居中。

div{
    width:200px;height:200px;  /*设置div的大小*/
    border:1px solid green;    /*边框*/
    text-align: center;        /*文字水平居中对齐*/
    line-height: 200px;        /*设置文字行距等于div的高度*/
    overflow:hidden;
}