CSS sets img images with a larger width than the screen to center left and right in the page

1. html structure

<div class="div1">
    <div class="div2">
        <img src="1.jpg" alt="">  
    </div> 
</div>

2, css style

.div1{width: 100%;overflow: hidden;}
.div2{width: 1920px;height: 100px;background-color: #000;margin-left: 50%;}
img{margin-left: -50%;}

Summary: margin-left: 50%; 50% left margin based on the width of the parent object, left: 50%; offset 50% of the width of the parent element

The percentage unit is basically relative to the parent element of the current element, except that the translate of transform is relative to itself