Although I've done some research and attempted to splice together code from various sources, including here, here, and other places, I'm still struggling with centering an image on a webpage.
The page in question features three layered .png images. The top two are dynamic in size, covering 100% of the page. The topmost image has a transparent hole in the center, revealing the middle one when JavaScript is activated. Both the top images and the JavaScript functionality work as intended.
My goal is to have the bottom image perfectly centered both vertically and horizontally, maintaining proportionality relative to the page size. Despite my efforts, I have not been able to achieve both vertical and horizontal centering simultaneously. Using the bottom image as a background isn't ideal due to color discrepancies or tiling issues.
Below is a snippet of the relevant code:
HTML:
<body>
<div>
<p0 id="face"><img src="face2.png"; class='face'></p0>
</div>
<p1 id="circuit"><img src='circuit.png' width='100%' height='100%' /></p1>
<p2 id="hole"><img src="hole.png" width='100%' height='100%' /></p2>
</body>
CSS:
p0 {
width: 50%; /* Unable to set height to 50% due to differing sizes */
center
z-index: 1;
position: absolute;
}
p1{
z-index: 2;
width: 100%;
padding: 0;
margin: 0;
height: 100%;
position: absolute;
}
p2{
z-index: 3;
width: 100%;
padding: 0;
margin: 0;
height: 100%;
position: absolute;
}