Flexbox水平/垂直居中超出<img/>

Question

尝试Hello world .test水平/垂直居中于.test，而.test img拉伸至.test { display: flex; align-items: center; justify-content: center; border: 5px solid blue; } .test img { width: 100%; display: block; } .test .test2 { max-width: 50%; }。我做错了什么？

http://jsfiddle.net/x06q69cc/

＆＃13;

＆＃13;

<div class="test">
  <img src="http://lorempixel.com/400/400">
  <div class="test2">
    <p>Hello world</p>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于您使.test成为Flexbox，因此其中的<img>和.test2在flex子元素方式中的行为类似，这意味着<img>和{{ 1}}将并排显示。

一种解决方案是将.test2设为灵活方式而不是.test2，并将.test绝对定位于.test2。

.test

.test {
    position: relative;
    border: 5px solid blue;
}

.test img {
    display: block;
    width: 100%;
}

.test .test2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}