html - 无法将 img 置于背景图像的中心(视差)

Question

我试图将类似个人资料图片的图像置于我的视差背景 img 的中心，但它停留在背景 img 的左上角。我想把它放在中心

.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

你的'ohwow'类图片有position:absolute。 margin: 0 auto; 不适用于绝对定位元素。所以请删除 position:absolute 我希望它能起作用。

position 的第二个选项:absolute。应用左侧和顶部偏移 50%。并添加 margin-top: "-half height of image"和 margin-left: "-half width of image"。比如图片尺寸是200w X 100h，那么margin可以是margin: -50px 0 0 -100px;

试试下面的代码

.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>