利用css实现图片居中的8中方法
程序员文章站
2022-03-02 15:29:49
...
<!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>