HTML to center the image horizontally and vertically

First, create a div tag in the parent tag, and set the background of the div tag as a picture in css, and then set the div to be the same width and height as the picture. I use a picture of a play button, width 80; height 80; parent label width 375, height 375 (the parent label width and height are not hard to write, it is adapted to the screen).

Add the CSS property of the parent tag: display: flex; and then add the child tag: align-self: center; At this point, you can center it vertically. Then add an attribute to the subtag: margin:0 auto; At this point, it can be horizontally centered.

#videoICO{
    position:absolute;
    display:flex;
    width:100%;
    height:100%;
    z-index: 10;
}

.playImg{
    width:80px;
    height:80px;
    align-self:center;
    margin:0 auto;
    z-index: 10;
    background: url(../images/video.png);
    background-repeat:no-repeat;
}

videoICO is the parent tag, playImg is the div for the picture