使用 display:flex 水平和垂直居中图像

Posted 2023-03-29

【中文标题】使用 display:flex 水平和垂直居中图像

【英文标题】：Center images horizontally and vertically with display:flex

【发布时间】：2020-03-10 17:36:57

【问题描述】：

我想使用 display:flex (justify-content:center; align-content:center;) 将所有图像水平和垂直居中，但它不起作用 - 图像仍位于父元素的顶部。有什么想法吗？

https://dstruning.com/

【问题讨论】：

How do I vertically center text with CSS?的可能重复

请参阅answer 以及如何使用 flex 居中的许多其他示例

对不起，但那是完全不同的。我已经阅读了很多关于 flexbox 的内容，但我没有发现失败之处……所以如果有人可以帮助我，那就太好了。

我已经在下面发布了答案，请在以后发布一个显示问题和代码的最小演示。

【参考方案1】：

在这种情况下你不能使用 flexbox，因为你是绝对定位。您需要设置position: relative并设置容器的高度，然后绝对定位图像。

下面是一个sn-p来学习：

html,
body: 
  height: 100vh;


#center     
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: #000;
 
 
 #imagesslider 
  position: relative;
  height: 100%;
 
 
 #imagesslider > img 
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 

<div id="center">
  <div id="imagesslider">
    <img src="https://dstruning.com/img/05.png" style="width: 100px;z-index: 1"/>
    <img src="https://dstruning.com/img/03.png" style="width: 300px;"/>
  </div>
</div>

【讨论】：

但是，我必须分别为每个 img 元素添加样式 - 当我汇总信息时它不起作用。好像和我的js代码冲突了。