CSS Image With Black Overlay and Center White Text

<div class="overlay"><img src="https://via.placeholder.com/150" /><div>+1</div></div>

.overlay {  position: relative;  > div {    position: absolute;    color: #fff;    font-size: 35px;    background-color: rgba(0, 0, 0, .4);    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;    // center text    display: flex;    align-items: center;    justify-content: center;  }}

.overlay {  position: relative;}.overlay > div {  position: absolute;  color: #fff;  font-size: 35px;  background-color: rgba(0, 0, 0, 0.4);  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 1000;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;}