Question

我不确定我是不是疯了，所以我来到了 Stack（因为我怀疑我是一个人在这里）。

试图将绝对定位的 div 水平居中。 div 有一个不重复的背景图像。尝试了各种边际和牛仔的尝试..... 我该怎么办？

这是最新的尝试（之前也有过没有底的：0等：

  .somediv {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 99999;
    background-image: url('../assets/images/notporn.png');
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto;
  }

Answer 1

响应式解决方案

标记为重要的 CSS 声明需要将图像动态定位到父容器的宽度和高度。

.parent {
  position: relative;  /* important */
  width: 300px; /* i'm using 100px more than the image's width and height for 50px on each side of the image for you to notice the image in the middle of it's parent */  /* important */
  height: 400px; /* important */
  background-color: red;
}

.child {
  position: absolute; /* important */
  top: 50%;  /* important */
  left: 50%;  /* important */
  transform: translate(-50%, -50%);  /* important */
  margin-left: auto; /* not important */
  margin-right: auto;  /* not important */
  z-index: 99999;
  width: 200px;  /* important */
  height: 300px;  /* important */
  background-image: url('https://picsum.photos/id/237/200/300'); /* important */
  background-repeat: no-repeat;
  background-size: auto;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

如果图像的宽度固定，则可以使用 calc() 从 50% 中减去一半的宽度，然后将其添加到 left 和 right。在这个例子中，我给图像设置了 200px 的宽度。这对你有用吗？

.somediv {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: calc( 50% - 100px);
    right: calc( 50% - 100px);
    bottom: 0;
    z-index: 99999;
    background-image: url('../assets/images/notporn.png');
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-size: auto;
  }

<div class="somediv"></div>

Answer 3

您的代码几乎是正确的，而且是传统方式

有很多方法可以实现解决方案。我相信最好的方法就是用最简单的方法去做。您不需要大小、百分比或转换来实现通用的工作解决方案。

要做到这一点，您的代码正在编写中并且几乎正确。最后，您只错过了一个属性来运行您的解决方案。实际上，您的代码是实现任何父容器的通用居中层元素的常用且最简单的技术。

我添加了该属性，并从不需要的元素中清除了您的代码。只需查看代码中的注释即可。

.container {
    /* needed */
    position: relative;

    /* 
    for testing/demonstration
    make container visible for testing
    THIS color must be covered completely from inner centered div 
    */
    background: magenta;
    margin: 20px auto;
    width: 300px;
    height: 200px;
}


.center_xy {

    /*  
    centering part
    ONLY NEEDED CODE FOR ABSOLUTE CENTERING
    = typical code to realize a overlay layer
    it covers the parent div autmatically WITHOUT using fix or percentage sizes
    */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;

    /*
    your styling part
    adding background image
    you only missed to add the position to the background image
    */
    background-image: url('https://dummyimage.com/100x100/006400/fff.png&text=-+logo+-');
    background-repeat: no-repeat;

    /* 
    THIS IS WHAT YOU MISSED
    add position  to background image 
    */
    background-position: center;


    /* 
    some cleanup
    not needed ....
    width: 100%;
    height: 100%;
    background-size: auto;
    */

    /* 
    testing part
    make centered container visible 
    this color has to cover all ... 
    */
    background-color: yellow;

}

<div class="container">

    <div class="center_xy"></div>

</div>

更新
只是一个礼貌的附加通知。如果除了将徽标放置在一个空的定位包装器/容器中之外没有其他原因，我想添加礼貌提示......在这种情况下不需要覆盖元素。在这种情况下，您可以通过 css 直接将徽标图像添加到背景中，如示例中所示...或使用属性 flexbox 来轻松地将通过 <img> 标记添加到 html 中的徽标设置为 xy 中心。< /p>

水平居中绝对位置元素

3 个答案: