居中翻转图像

Question

我在Stack Overflow上找到了以下代码。

但是，代码不会使图像居中。有人能帮帮我吗？

HTML：

<div class="photo">
<a href="#">
    <img src="https://www.weebly.com/editor/uploads/2/9/9/6/29968995/custom_themes/185017182709687634/files/img/beforeafter/s6.jpg" alt="before" class="before">
    <img src="https://www.weebly.com/editor/uploads/2/9/9/6/29968995/custom_themes/185017182709687634/files/img/beforeafter/s1.jpg" alt="after" class="after">
</a>
</div>

CSS：

    img {
width: 300px;
}
.photo {

position: relative;
overflow-x: hidden;
}
.photo .after {
position: absolute;
top: 0;
left: 0; 
display: none;
}
.photo .before:hover + .after, .after:hover {
display: block;
}

Answer 1

有多种方法可以实现最简单的flex布局，你需要编辑CSS for photo类，添加下面几行代码：

.photo {
  display: flex;
  justify-content: center; //horizontal align to center
 /* align-items: center*/ -->  this will align it vertically.  
}

flex的默认方向是行(水平方向)，属性的行为也相应。如果我们改变flex-direction: column，justify-content和align-items根据方向的不同表现不同。

有关 flexbox 的更多信息:关于CSS flexbox的最佳文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox