关于居中

关于居中：
（1）将margin设置为auto：这种方法只能实现水平居中，并且对float和绝对定位的元素无效（可以实现块状元素的水平居中：我们只需要将它的margin-left和margin-right设置成auto）

（2）使用text-align：center：只能对图片，按钮，文字等行内元素进行居中
可以实现多个块状元素的水平居中（将水平排列的元素设置为display:inline-block，然后在父元素上设置：text-align:center）

#container{
    text-align:center;
}
 
#center{
    display:inline-block;
}

（3）使用line-height让一行的文字居中：将line-height的高度设置为父容器的高度，适用于文字只有一行的情况
（4）对于表格元素的居中，只需要使用text-align：center和vertical-align：middle就可以处理它里面内容的水平和垂直居中问题了
（5）使用display:table-cell：对于那些不是表格的元素，我们可以把它模拟成表格元素，这样就可以方便的利用表格的那些特性啦，这种方法只能在IE8+，谷歌，firefox上有效
应用场景：被居中的元素是inline或者是inline-block的时候，可以将父容器设置为display:table-cell，然后使用text-align：center和vertical-align：middle

#container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
 
#center{
 
}

（6）使用绝对定位和负margin来实现居中
这种方式需要知道自身的宽高

<div class="parent">
<div class="child">
</div>
</div>

.parent {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 100px;
background: lightcoral;
position: absolute;
margin: -50px 0 0 -50px ;
top: 50%;
left: 50%;
}

（7）使用绝对定位加margin（无需知道被定位元素的宽高，也无需知道父元素的宽高）

<div class="parent6">
<div class="child6"></div>
</div>


.parent6{
position: relative;
height: 300px;
width: 300px;
background-color: #ADD8E6
}
.child6{
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: orange
}

（8）使用transform加绝对定位

<div class="parent1">
<div class="child1"></div>
</div>

.parent1 {
width: 300px;
height: 300px;
background: lightblue;
position: relative;
}
.child1 {
background: orange;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}

使用绝对定位加transform,可以不用知道父元素的宽高
也不用知道自身的尺寸，因为transform中translate偏移的百分比就是相对于元素自身尺寸而言的

如果只想设置垂直居中，那么可以只设置top:50%，然后transform:translate（-50%，0）
同样的，如果只是想设置水平居中的话，就可以只设置left:50%，然后transform：translate（0，-50%）

（8）使用flex布局（需要考虑兼容性问题 IE11+，chrome29+，firefox28+）

<div class="parent3">
<div class="child3"></div>
</div>


.parent3 {
width: 300px;
height: 300px;
background: lightblue;
display: flex;
align-items: center;  //垂直居中
justify-content: center;  //水平居中
}
.child3 {
width: 100px;
height: 100px;
background: orange;
}