图片居中的N中方式

发表于 | 分类于

图片居中的N中方式：以下面的代码为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            height: 200px;
            width: 300px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div>
    <img src="img/01.jpg" alt="" width="100px" height="100px"/>
</div>
</body>
</html>

水平居中

第一种方法：给img的父盒子 设置 text-align:center,可以使文本或者图片水平居中

1
2
3
4
5
6
7
div{
           height: 200px;
           width: 300px;
           background-color: pink;
           margin: 100px auto;
	   text-align:center
       }

第二种方法:计算父盒子剩余宽度 给img添加margin

1
2
3
img {
   margin :0 100px	;  (父盒子宽度-img宽度)/2   (300-100)/2
}

第三种方法: 由于margin: 0 auto 的居中只能给块级元素设置才有效果,所以将img转化为块级元素

1
2
3
4
img {
  display :block ;
  margin :0 auto ;
}

第四种方法:给父盒子开启弹性布局,注意图片会被拉伸，因为默认开启弹性布局之后，align-self:strench 

1
2
3
4
5
6
7
8
9
div{
           height: 200px;
           width: 300px;
           background-color: pink;
           margin: 100px auto;
           display: flex;
           justify-content: space-around;
       }

第五种方法 :利用margin auto 的流体特性

1
2
3
4
5
6
7
8
9
div{
  position:relative;
}
img{
  position:absolute;
  left:0;
  right:0;
  margin:0 atuo ;
}

垂直居中

第一种方法：计算父盒子剩余高度给img添加margin

1
2
3
img{
  margin:50px 100px ;
}

第二种方法,给父盒子开启弹性布局，同时给img设置 align-self:center

1
2
3
4
5
6
7
8
9
10
11
12
div{
            height: 200px;
            width: 300px;
            background-color: pink;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
        }
img {
   			align-self:center
}

第三种方法 : 利用margin auto 的流体特性

1
2
3
4
5
6
7
8
9
div{
  position:relative;
}
img{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0 ;
}