Can't center img over background-image (parallax) - html

Question

Im trying to center a profile picture-like image over my parallax background img, but it is staying in the top left corner of the background img. I want to get it in the center
.natecontain {
text-align: center;
}
.ohwow {
width: 30%;
display: block;
margin: 0px auto;
position: absolute;
z-index: 10;
}
.parallax {
/* The image used */
background-image: url("https://placehold.it/1500x1000");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="natecontain">
<img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>
<div class="parallax"></div>

Answer 1

your image with class 'ohwow' has position:absolute. margin: 0 auto; will not work with absolute positioned element. So please remove position:absolute and i hope it will work.
second option with position: absolute.
Apply left and top offsets 50%. and add margin-top: "-half height of image" and margin-left: "-half width of image". for example if the image size is 200w X 100h, then the margin can be margin: -50px 0 0 -100px;
try below code
.natecontain
{
text-align: center;
}
.ohwow
{
background-color: red;
width: 200px;
height: 100px;
display: block;
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
.parallax {
/* The image used */
background-image: url("nban.jpg");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="natecontain">
<img src="me.jpg" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow"/>
</div>
<div class="parallax"></div>

Answer 2

please use
background-position: center center; instead of background-position: center; also add some content in your container so that some result can be seen

Answer 3

If you want to center align any absolutely positioned element you whould be offsetting its position using left and right properties (for horizontal alignment) and top and bottom properties (for vertical alignment).
NOTE: for vertical center alignment, you must declare display: block; margin: auto; in addition to top: 0; bottom: 0;
To scale your elements more gracefully (with the viewport), you should nest your absolutely positioned element within the relatively positioned parallax element. This will also make the vertical & horizontal alignment precise as these values are now offset relative to the containing parent element (which is positioned relative).
In other words absolute elements are positioned relative to its closest/nearest relative containing parent element.
html, body {
height: 100%; /* So we can see what's happening here */
}
.natecontain { /* This element is now redundant for the purposes of this demonstration and can be removed */
text-align: center;
}
.ohwow {
width: 30%;
display: block;
margin: auto; /* adjusted for veritcal center alignment */
position: absolute;
z-index: 10;
border: 1px dashed #868686; /* just so we can see the image better */
/* center horizontally */
right: 0;
left: 0;
/* center vertically */
top: 0;
bottom: 0;
}
.parallax {
/* The image used */
background-image: url("https://placehold.it/1500x1000");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="parallax">
<!-- Nest your absolute element within a relative positioned parent element so that the offset properties for left, right, top and bottom are relative to this containing element -->
<img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>