图片水平垂直居中

Posted 2021-01-29 browse

　　1.图片水平居中

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

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

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

 

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

　　　　　img元素结合display:block;属性

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

　　2. 图片垂直居中

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

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

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

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

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

　　　　　　结合c3的transform属性的translate

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

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

　　　　　 2-4.利用flex布局

　　　　　　css3中的flex布局方式，

　　

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

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