让大小不定的图片水平垂直居中

实现大小不定图片的水平、垂直居中方案。

效果

效果

方法

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文件中则不支持动态修改。

参考

• 大小不固定的图片和多行文字的垂直水平居中