html - 如何将不同尺寸的图像置于 div 中间

Question

我在水平线上有各种图像。有些图像的大小不同，所以我希望所有图像相对于它们所包含的 div 居中，这样看起来更好。我希望在不采用当前设置的方式(即添加上边距)的情况下实现这一目标。

有没有办法在 css 中自动执行此操作，以便如果图像发生变化，它们仍然会相对于包含的 div 居中？

https://jsfiddle.net/0aqavqtL/

<div class="row" style="text-align: center; margin: 30px 0; width: 100%;">
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com/" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAAQlBMVEX0TiT/uQIBpO+BuQD////0SRz/tAD5/v/2d17//PRStvIAou/7/PR2tACbx1L//vkAne7/rwBAsfH0RRGUw0D4lIKWmv8+AAABF0lEQVR4nO3P2Q3CQBQEwQVsY+47/1T5gw0ADXpWdQKtai3VOA+fjqdNqpgPEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBDwl8Ax1eNPwDnWqwM+z6nasPAAqwdYPcDqAVZv+cBtrm57idWuse5f3+42pWrrVId9B5xWqQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBASsC30hhhGitFNxPAAAAAElFTkSuQmCC"></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com/" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAAC8EZcfAAAAZlBMVEUFBwj///8AAACnp6cAAwTDw8P09PRRUlPu7u5HSEgAAAOsra0QEhP6+vpTVFU5Ojt5enoXGRrKyssdHx80NTbZ2dnh4eG4ublNTk6foKAqLCyRkpJ2d3hcXV19f3/q6uokJihlZma9e7nrAAABDElEQVR4nO3Zy07DMBBGYXtqkjYlaQmtQ6Gk9P1fEki4lcsCzSJ/pPMtvD6ajS1PCAAAAAAAAAAAAAAAAIA8G02d8Zdkm6Z8saumLvldZY/74tVBc4SVHXMcLCQDzR7qqBuY7L6LUTcwWdlG5UA756gcaMciKgfa6qJPMXA5j8B2rx3YPV0pB9YHM+XAU2/KgUU+myXdwLLdWAq6gel2eKPqBoaUhlM3cESgF4FeBHoR6EWgF4FeBHoR6EWg15wC09QtPw3rh49AwVVE02+3/dvnUe669U6rsLpexwvFSjxwSeD/EOg1g8BFXXyVxQJDGBex75q7G7XLxL5R6wMAAAAAAAAAAAAAAAA+PQM59QqnSlPNowAAAABJRU5ErkJggg=="></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/en/e/ef/Dots_video_game_cover.png"></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAA+VBMVEX///8Apmj/1AEAf8TtGUH80gDl5OPu7e63r7TuFT/m5ugSf7/rADnn6OiqsbEUo2uzrazlI0YAoHQAiMgAl2Dj0DutqavlPEobfsUvlWEVkV34AD8AombhDE//2AAAf8Ijgrj99e/qxjlEi6rjvBW4q4PEs3s5pGvU09fXsh7Hx8vu+vkAcr2+t0kAcrWgpWDVxjGvssHpyTHK1d0Ad8kAr2vQN0bfQlixvr3CyMg9g1n/zAAtilvgswDuvgBBiKqku8qVsbpPhFqZmqusS0u3O0XDNEUAZ7bQHUDFJkCqPEfS3uXh3tbGs2byzxTtyygAbcy6tU22uIhH/tAJAAADWklEQVR4nO3dfVfSUBzAcWMTZTZ12cNMY5RmZlD5WJalPWnPWe//xQSCjObAu7Ur9/72/f7BcR447HPuNsY2YGKCiIiIiIiIqBxNeb7ve2f53b/601480b71z/NGFt+h85gpvan4JnX24MY1jc1tKAi9yYq+6pqB09UxAysAAQIECBAgQIAAAQIECLCUQN7wAgQIECDAEYl/mRAPFL+IAgQIECBAgAABAgRoEXB3VzJw+fhLu6+qRguBn4MgcI8lA13XrUkHCh/BWs2yEZzL1Ke9dh8tAm59uJ2pTONtBHCzmuX61nULgf7lsxBXtRDoAQQIECDAsgLrAwkE1reexW0NA1r8Ql9vnTw976SVPoR2j2CrGXVy2jWFAp2zolFAqxfRHnDkCAoB7pQXKGEdLANQ/DooHRjJBP4+3TnvtFVP7ZfNwMrP53E/HqY3rfJJcFOBlXixrK9trqemMAcGAweoaxuZJAABAgQIECBAgAABAgQIECBAgABlA28V0p/9J4kuPtX9S/v+KFsqQP9eIQVu51LWXp3rkoP95BHRb2H3bLDj9E4LR1H/DHFvwgnbnd0oNTOvArxeU2lw/tPv0GHF1YLZ5JNvx6cyCkoR6OooEzCSDszbmIHJU5+mA5NrWf/fw4Drnlf1B7Y026HhwLuZerXUecyLgW2p8cCby1k66AJfxucHzQdm2ssQD1y8CDR9I5MPOLAOigS+2+531EhvxmbgnYWwGYbNdmGz8Ti1N4dK62ba3o4RwP7chI3V1G+Lf72Se+NjFtBprPbeO/77TrIiDpgMIEAzgCFAy4HiF9FhwEkpwGGLKMBSAruHU2UARxxTtAMoZitaWiAbmdQie4D5FlGLgGIWUfG7auKBYeNtJe3TP2JeJpzocCW1XMdFDdrIxLtaQ8605x0/U4B6MmgENQYQIECAAAECBAgQIEA7gAeLWXp/OTDvhb6agO5StlzbRjBPAAECBGgJMNJ/OeV4gVdwveiYgWkBBHhFQBs/fQawVMC8AQQIECBAgAABAtQB/O+j2qYDCwkgQIAALwIL2X4CZBHVAixw8MwEFh1A24BRYkocMFmRX/2XM61Axe82DHS2tzCjMxXg1P6szua1tqHym0BZfozbuBR8REREREREVIb+AtF2M2YGUTpkAAAAAElFTkSuQmCC"></a>
</div>
</div>

Answer 1

在父级上使用 display: flex 以及 justify-content: center 和 align-items: center 将使子级水平和垂直居中在行中。

如果您希望在没有足够的空间让列并排显示时将行换行到下一行，请将 flex-wrap:wrap 应用于 .row.centered

.row.centered {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="row centered"   >
  <div class="col-xs-12 col-sm-4 col-md-2" style="">
    <a href="http://example.com/" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAAQlBMVEX0TiT/uQIBpO+BuQD////0SRz/tAD5/v/2d17//PRStvIAou/7/PR2tACbx1L//vkAne7/rwBAsfH0RRGUw0D4lIKWmv8+AAABF0lEQVR4nO3P2Q3CQBQEwQVsY+47/1T5gw0ADXpWdQKtai3VOA+fjqdNqpgPEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBDwl8Ax1eNPwDnWqwM+z6nasPAAqwdYPcDqAVZv+cBtrm57idWuse5f3+42pWrrVId9B5xWqQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBASsC30hhhGitFNxPAAAAAElFTkSuQmCC"></a>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2" style="">
    <a href="http://example.com/" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAAC8EZcfAAAAZlBMVEUFBwj///8AAACnp6cAAwTDw8P09PRRUlPu7u5HSEgAAAOsra0QEhP6+vpTVFU5Ojt5enoXGRrKyssdHx80NTbZ2dnh4eG4ublNTk6foKAqLCyRkpJ2d3hcXV19f3/q6uokJihlZma9e7nrAAABDElEQVR4nO3Zy07DMBBGYXtqkjYlaQmtQ6Gk9P1fEki4lcsCzSJ/pPMtvD6ajS1PCAAAAAAAAAAAAAAAAIA8G02d8Zdkm6Z8saumLvldZY/74tVBc4SVHXMcLCQDzR7qqBuY7L6LUTcwWdlG5UA756gcaMciKgfa6qJPMXA5j8B2rx3YPV0pB9YHM+XAU2/KgUU+myXdwLLdWAq6gel2eKPqBoaUhlM3cESgF4FeBHoR6EWgF4FeBHoR6EWg15wC09QtPw3rh49AwVVE02+3/dvnUe669U6rsLpexwvFSjxwSeD/EOg1g8BFXXyVxQJDGBex75q7G7XLxL5R6wMAAAAAAAAAAAAAAAA+PQM59QqnSlPNowAAAABJRU5ErkJggg=="></a>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2" style="">
    <a href="http://example.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/en/e/ef/Dots_video_game_cover.png"></a>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-2" style="">
    <a href="http://example.com" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAA+VBMVEX///8Apmj/1AEAf8TtGUH80gDl5OPu7e63r7TuFT/m5ugSf7/rADnn6OiqsbEUo2uzrazlI0YAoHQAiMgAl2Dj0DutqavlPEobfsUvlWEVkV34AD8AombhDE//2AAAf8Ijgrj99e/qxjlEi6rjvBW4q4PEs3s5pGvU09fXsh7Hx8vu+vkAcr2+t0kAcrWgpWDVxjGvssHpyTHK1d0Ad8kAr2vQN0bfQlixvr3CyMg9g1n/zAAtilvgswDuvgBBiKqku8qVsbpPhFqZmqusS0u3O0XDNEUAZ7bQHUDFJkCqPEfS3uXh3tbGs2byzxTtyygAbcy6tU22uIhH/tAJAAADWklEQVR4nO3dfVfSUBzAcWMTZTZ12cNMY5RmZlD5WJalPWnPWe//xQSCjObAu7Ur9/72/f7BcR447HPuNsY2YGKCiIiIiIiIqBxNeb7ve2f53b/601480b71z/NGFt+h85gpvan4JnX24MY1jc1tKAi9yYq+6pqB09UxAysAAQIECBAgQIAAAQIECLCUQN7wAgQIECDAEYl/mRAPFL+IAgQIECBAgAABAgRoEXB3VzJw+fhLu6+qRguBn4MgcI8lA13XrUkHCh/BWs2yEZzL1Ke9dh8tAm59uJ2pTONtBHCzmuX61nULgf7lsxBXtRDoAQQIECDAsgLrAwkE1reexW0NA1r8Ql9vnTw976SVPoR2j2CrGXVy2jWFAp2zolFAqxfRHnDkCAoB7pQXKGEdLANQ/DooHRjJBP4+3TnvtFVP7ZfNwMrP53E/HqY3rfJJcFOBlXixrK9trqemMAcGAweoaxuZJAABAgQIECBAgAABAgQIECBAgABlA28V0p/9J4kuPtX9S/v+KFsqQP9eIQVu51LWXp3rkoP95BHRb2H3bLDj9E4LR1H/DHFvwgnbnd0oNTOvArxeU2lw/tPv0GHF1YLZ5JNvx6cyCkoR6OooEzCSDszbmIHJU5+mA5NrWf/fw4Drnlf1B7Y026HhwLuZerXUecyLgW2p8cCby1k66AJfxucHzQdm2ssQD1y8CDR9I5MPOLAOigS+2+531EhvxmbgnYWwGYbNdmGz8Ti1N4dK62ba3o4RwP7chI3V1G+Lf72Se+NjFtBprPbeO/77TrIiDpgMIEAzgCFAy4HiF9FhwEkpwGGLKMBSAruHU2UARxxTtAMoZitaWiAbmdQie4D5FlGLgGIWUfG7auKBYeNtJe3TP2JeJpzocCW1XMdFDdrIxLtaQ8605x0/U4B6MmgENQYQIECAAAECBAgQIEA7gAeLWXp/OTDvhb6agO5StlzbRjBPAAECBGgJMNJ/OeV4gVdwveiYgWkBBHhFQBs/fQawVMC8AQQIECBAgAABAtQB/O+j2qYDCwkgQIAALwIL2X4CZBHVAixw8MwEFh1A24BRYkocMFmRX/2XM61Axe82DHS2tzCjMxXg1P6szua1tqHym0BZfozbuBR8REREREREVIb+AtF2M2YGUTpkAAAAAElFTkSuQmCC"></a>
  </div>
</div>