如何将图片在200px×200px的div父元素中垂直水平居中？

嘿，我来帮你搞定这个图片居中的难题！你现在的情况是想把50×50的图片放在200×200的div容器里，实现垂直和水平双居中，但目前只有float:left能生效——不过这属性本来就不是用来做居中的，它的作用是让元素脱离正常文档流并向左浮动，自然没法帮你实现垂直居中的需求。

下面给你几种简单靠谱的实现方法，任选一种都能解决问题：

方法1：Flexbox布局（最推荐，现代浏览器首选） #

Flexbox是目前实现居中最简洁高效的方式，只需要给父div添加几个CSS属性就行：

<div style="width:200px;height:200px;display:flex;justify-content:center;align-items:center;">
  <a>
    <img src="/resources/warenkorb.png" width="50" height="50" />
  </a>
</div>

• display:flex：把父元素转为弹性容器
• justify-content:center：让子元素在水平方向上居中
• align-items:center：让子元素在垂直方向上居中

方法2：Grid布局（同样简洁，适合网格场景） #

Grid布局也是现代CSS的利器，实现居中更简单：

<div style="width:200px;height:200px;display:grid;place-items:center;">
  <a>
    <img src="/resources/warenkorb.png" width="50" height="50" />
  </a>
</div>

place-items:center是个简写属性，同时实现了垂直和水平方向的居中，一步到位。

方法3：绝对定位+transform（兼容旧浏览器） #

如果需要兼容一些比较老的浏览器，这种传统方法也很实用：

<div style="width:200px;height:200px;position:relative;">
  <a style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
    <img src="/resources/warenkorb.png" width="50" height="50" />
  </a>
</div>

• 父元素设position:relative，为子元素的绝对定位提供参考
• 子元素position:absolute后，top:50%和left:50%让它的左上角对齐父元素中心
• transform:translate(-50%,-50%)把元素往回移动自身宽高的50%，最终实现完美居中

你可以根据自己的浏览器兼容需求选择其中一种方法，亲测都能解决你的问题哦！

内容的提问来源于stack exchange，提问作者Matze2104