如何在图片中将div居中？ （使用flex但不使用background-img）

Question

像往常一样，我拼命地尝试使用CSS进行所有操作，数小时；）如果不清楚的话，很抱歉，我尝试使其变得可理解。

我的图像模糊，我想在其中放一个div并将其居中。 最好是将两个元素彼此相邻

<parent/>
<child/>

因为父母模糊了，孩子却没有。 我尝试过了

<parent class="blured">
    <child class="notblured"/>
</parent>

.blured{
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.notblured{
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    filter: blur(0) !important;
}

child{
    margin: auto;
    width: 19em;
}
parent{
    display: flex;
    justify-content: center;
    align-items:center;
}

但是这不起作用，两者都模糊了+我的图像不是我想要的样子

因此，我希望将它们彼此并排放置，然后我可以手动将其居中，但那时它没有响应...          

child{
    padding: 1.5em;
    text-align:center;
    width: 19em;
    padding-top:0.5em;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 6em;
    left: 0;
    right: 0;
}

有什么建议吗？

Answer 1

同时使用外部元素作为父元素，并使用以下CSS将子元素居中：

.blured {
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.outer{
  position: relative;
  width: 500px;
  height: 300px;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 100px;
  background: blue;
  transform: translate(-50%, -50%);
}

.parent {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: red;
}

<div class="outer">
  <div class="parent blured">
  </div>

  <div class="child">
  </div>
</div>

Answer 2

将具有滤镜模糊效果的图像放在伪元素:before或:after上，这样滤镜不会影响子元素。也需要一些z-index才能使用此确切方法。

.parent {
  position: relative;
  display: flex;
  justify-content: center;
  align-items:center;
  min-height: 100vh;
}
.parent:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 1;
}
.child {
  position: relative;
  color: white;
  background: green;
  min-height: 200px;
  min-width: 300px;
  z-index: 9;
}

<div class="parent blured">
    <div class="child">CHILD</div>
</div>