图片水平垂直居中

　　1.图片水平居中

　　　1-1: 使用text-align:center让图片居中

　　　　给img元素的父级元素添加text-align属性

    <div style=" 400px; height: 300px; border:1px solid red; text-align:center">
        <img src="8104044_230939695000_2.jpg" style=" 80%;">
    </div>

　　　1-2: 使用margin:0 auto使得图片水平居中

　　　　　img元素结合display:block;属性

<div style=" 400px; height: 300px; border:1px solid red;">
        <img src="8104044_230939695000_2.jpg" style=" 80%; display:block; margin:0 auto;">
    </div>

　　2. 图片垂直居中

　　　　2-1:使用line-height属性，给父元素添加行高，img结合vertical-align:middle;

    <div style=" 400px; height: 300px; border:1px solid red; line-height:300px;">
        <img src="8104044_230939695000_2.jpg" style=" 80%; vertical-align: middle; ">
    </div>

　　　　2-2:利用table实现垂直居中；结合着vertical-align:middle使用

    <div style=" 400px; height: 300px; border:1px solid red; display: table-cell; vertical-align: middle;">
        <img  src="8104044_230939695000_2.jpg" style="80%; ">
    </div>

　　　　2-3: 利用定位实现图片垂直居中

　　　　　　结合c3的transform属性的translate

    <div style=" 400px; height: 300px; border:1px solid red; position: relative;">
        <img  src="8104044_230939695000_2.jpg" style="80%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);">
    </div>

　　　　tip:以上图片只是垂直居中

　　　　　 2-4.利用flex布局

　　　　　　css3中的flex布局方式，

　　

    <div style=" 400px; height: 300px; border:1px solid red; display: flex; align-items: center; justify-content: center;">
        <img  src="8104044_230939695000_2.jpg" style="80%;">
    </div>

　　　　tip:利用justify-content:center;让子元素水平居中