Centring a .png with a high z-index within a div

Question

I want to have a .png image to be 1) exactly in the centre of a div, no matter the device size and 2) to be above another .png image in the same div. Here is my html:

And here is my CSS: #phone { position: absolute; left: 67%; top: 45%; z-index: 10; opacity: 100%; width: 200px; } The redphone.png is the image I'm referring to in my specifications above. Using position: absolute; and z-index: 10; seems like the only way I get the .png to be above the other image, but it seems to place it outside the div. Whereas using, say, position: relative; with the same z-index displaces the png above the other image but keeps it contained in the same div. This is the web page, if anyone wants to view the page source and see all the code. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You can try adjusting the left and top to 50%, but also add transform: translate(-50%, -50%);. Result: #phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; }

Run code snippetExpand snippet