CSS如何实现元素水平垂直居中，flex配置未生效怎么办

你当前配置的flex属性仅作用于.text容器内部，仅能让内部的+号图标居中，无法实现悬浮层在图片上的整体居中，核心问题及修复方案如下：

问题根源 #

• 包裹图片的父容器.main-blog-img未设置position: relative，导致子元素.middle的绝对定位基准是整个浏览器视口，而非当前图片容器，所以居中位置偏移

修复方案 #

只需给父容器补充相对定位配置即可，完整可运行的代码如下：

CSS代码

/* 新增父容器样式 */
.main-blog-img {
  position: relative;
  display: inline-block; /* 保证容器尺寸和内部图片一致 */
}
/* 原有样式无需修改 */
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 16px;
  padding: 16px 32px;
}
/* 补充hover显示悬浮层的样式，按需添加 */
.main-blog-img:hover .middle {
  opacity: 1;
}
.main-blog-img:hover .image {
  opacity: 0.3;
}

HTML代码和原有代码一致即可：

<div class="main-blog-img">
  <img src="img/images/Asset2.png" class="image">
  <a href="">
    <div class="middle">
      <div class="text"><i class="fa fa-plus"></i></div>
    </div>
  </a>
</div>

其他常用居中方案参考 #

如果不想用绝对定位实现，也可以直接给父容器设置flex属性实现内部元素居中：

.main-blog-img {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

这种方式下.middle的绝对定位属性也可以保留，不会影响悬浮层级的展示效果。

内容的提问来源于stack exchange，提问作者pattes