利用css实现图片居中的8中方法

最新推荐文章于 2024-07-18 10:13:50 发布

裴嘉靖

最新推荐文章于 2024-07-18 10:13:50 发布

阅读量1.6k

点赞数 3

分类专栏： css实现图片居中

本文链接：https://blog.csdn.net/peijiajing/article/details/105920759

版权

css实现图片居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <style>
 	div{
  	 width: 500px;
  	 height: 500px;
  	 border: 1px solid #ccc;
     position: relative;;
	}
	img{
	   width: 100px;
	}
	
	.a1 img{
	   position: absolute;
	   left: 50%;
	   top: 50%;
	   margin-left: -50px;    
	   margin-top: -50px;
	}
	.a2 img{
	   position: absolute;
	   left: 0;
	   right: 0;
	   top: 0;
	   bottom: 0;
	   margin: auto;
	}
	.a3 img{
	   position: relative;
	   left: 50%;
	   top: 50%;
	   transform: translate(-50%);
	}
	.a4{
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.a5{
	   text-align: center;
	   line-height: 500px;
	}
	.a6{
	   text-align: center;   
	}
	.a6 span{
	   display: inline-block;
	   height: 100%;
	   vertical-align: middle;
	}
	.a7 {       
	   display: table-cell; 
	   vertical-align: middle;
	   text-align: center;    
	}
	.a8 {
	   /* overflow: hidden; */
	}
	.a8 img{
	   float: left;
	   margin-top: 50%;
	   margin-left: 50%;
	   transform: translate(-50%,-50%);
	}
   </style>
</head>
<body>
    <div class="a1">
        <img src="./images/01.jpg" alt="">
    </div>
    <div class="a2">
        <img src="./images/01.jpg" alt="">
    </div>
    <div class="a3">
        <img src="./images/01.jpg" alt="">
    </div>
    <div class="a4">
        <img src="./images/01.jpg" alt="">
    </div>
    <div class="a5">
        <img src="./images/01.jpg" alt="">

    </div>
    <div class="a6">
        <img src="./images/01.jpg" alt="">
        <span>  </span>
    </div>
    <div class="a7">
        <img src="./images/01.jpg" alt="">
    </div>
    <div class="a8">
        <img src="./images/01.jpg" alt="">
    </div>
</body>
</html>