实现大小不定图片的水平、垂直居中方案。
效果
效果
方法
html结构如下：
<ul class="wrap">
<li><img src="https://dummyimage.com/300x200/333/EEE.png"></li>
<li><img src="https://dummyimage.com/100x200/ff5566/EEE.png"></li>
<li><img src="https://dummyimage.com/200x150/333/EEE.png"></li>
<li><img src="https://dummyimage.com/100x100/fe56ed/EEE.png"></li>
<li><img src="https://dummyimage.com/50x200/5e66ed/EEE.png"></li>
</ul>
法一：仿单行文字居中
- 在
li上加text-align: center;实现图片水平居中 - 设置
li的line-height与height相等，并设置img垂直对齐为vertical-align: middle;，实现垂直居中
li {
display: inline-block;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
img {
vertical-align: middle;
}
- 优点：兼容性好。
法二（推荐）：display: table-cell;
- 在
li上使用display: table-cell;，然后设置水平、垂直居中即可。
li {
display: table-cell;
width: 300px;
height: 300px;
text-align: center;
vertical-align: middle;
}
- 优点：简洁。
法三：position + transfrom
- 使用绝对定位与transform结合，实现水平、垂直居中。
li {
position: relative;
width: 300px;
height: 300px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 优点：通用的居中方法，方便记忆，兼容性好。
- 缺点：使用
transform容易出现半个像素渲染模糊的情况。
法四（推荐）：flex布局
- 利用flex布局自带属性实现水平、垂直居中。
li {
display: flex;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
}
- 优点：简单方便，代码量少。
- 缺点：不兼容低版本浏览器。
法五：背景定位
- 利用
background-position: center实现图片居中显示
html结构变更为：
<ul class="wrap">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
li {
width: 300px;
height: 300px;
background-position: center center;
background-repeat: no-repeat;
}
li:nth-child(1) {
background-image: url(https://dummyimage.com/300x200/333/EEE.png);
}
li:nth-child(2) {
background-image: url(https://dummyimage.com/100x200/ff5566/EEE.png);
}
li:nth-child(3) {
background-image: url(https://dummyimage.com/200x150/333/EEE.png);
}
li:nth-child(4) {
background-image: url(https://dummyimage.com/100x100/fe56ed/EEE.png);
}
li:nth-child(5) {
background-image: url(https://dummyimage.com/50x200/5e66ed/EEE.png);
}
- 优点：简单，兼容性好。
- 缺点：卸载css文件中则不支持动态修改。
