无法将图像居中置于背景图像(视差)上

Question

我试图在我的视差背景图像上居中显示类似个人资料图片的图像，但它停留在背景图像的左上角。我想把它放在中间

.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，我希望它会起作用。

第二个选项与位置：绝对。应用左偏移和顶部偏移 50%。并添加顶部边距："-图像的一半高度"和左边距："-图像的一半宽度"。例如，如果图像大小为 200W X 100H，则边距可以是边距：-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>

Answer 2

请使用 background-position: center center;而不是background-position: center;在容器中添加一些内容，以便可以看到一些结果

Answer 3

如果要center对齐任何绝对定位的元素，则可以使用left和right属性（用于水平对齐）以及top和bottom属性（用于垂直对齐）来偏移其位置。

注意： 对于垂直中心对齐，除了top: 0; bottom: 0;
之外，还必须声明display: block; margin: auto;

若要更优雅地缩放元素（使用视口），应将绝对定位的元素嵌套在相对定位的视差元素中。这也将使垂直和水平对齐精确，因为这些值现在相对于包含的父元素（相对定位）偏移。

换句话说，absolute元素位于relative其包含父元素的最近/最近relative的位置。

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>