居中翻转图像答案

【问题标题】：Centering Roll-Over Images居中翻转图像
【发布时间】：2019-01-26 02:36:48
【问题描述】：

我在 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;
}

【问题讨论】：

标签： css image hover center rollover

【解决方案1】：

有多种方法可以实现最简单的方法是 flex 布局，您需要编辑照片类的 CSS，添加以下代码行：

.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

【讨论】：