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

Question

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

Answer 1

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

下面是要研究的片段：

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>

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

Center images horizontally and vertically with display:flex

center

flexbox

display