像设置背景位置一样在div内居中放置图像

Question

无论该div的宽度和高度如何，是否有任何方法可以在div的完美中心内设置标签？ 换句话说，我想在div标签内设置图像位置，例如中心背景。 例如：

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

我想在div内设置一个图像，例如上面的背景，并设置自动宽度和100％的高度，以便图像中的所有重要内容都将位于div的中心。

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

非常感谢你！

Answer 1

您可以使用flex属性轻松地将其居中。 在这里演示

 .image-wrap { height: 400px; display: flex; align-items: center; justify-content: center; border: dotted 1px #CCC; } 

 <div class="image-wrap"> <img src="http://lorempixel.com/400/200" alt="some image here"/> </div> 

Answer 2

您可以这样做：

 .image-wrap { width: 50vw; height: 720px; background: url('some-images.jpg') no-repeat center center / auto 100%; position: relative; } img { position: absolute; top: 50%; left: 50%; margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */ margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */ } 

 <div class="image-wrap"> <img src="some-images.jpg" alt="some image here"/> </div> 

Answer 3

您可以使用transform: translate

 .image-wrap { position: relative; height: 400px; text-align: center; border: 1px dashed gray; } .image-wrap img { position: relative; top: 50%; transform: translateY(-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/200" alt="some image here"/> </div> 

现在，如果您希望它的行为与background-size: auto 100%可以，请执行以下操作

 .image-wrap { position: relative; height: 200px; border: 1px dashed gray; overflow: hidden; } .image-wrap img { position: relative; height: 100%; left: 50%; transform: translateX(-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

这是一个表现为background-size: cover的版本background-size: cover

 .image-wrap { position: relative; height: 200px; overflow: hidden; border: 1px dashed gray; margin-bottom: 10px; } .image-wrap img { position: relative; min-height: 100%; min-width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

这个版本的background-size: contain

 .image-wrap { position: relative; height: 200px; overflow: hidden; border: 1px dashed gray; margin-bottom: 10px; } .image-wrap img { position: relative; max-height: 100%; max-width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); } 

 <div class="image-wrap"> <img src="http://placehold.it/600x100" alt="some image here"/> </div> <div class="image-wrap"> <img src="http://placehold.it/200x400" alt="some image here"/> </div> 

Answer 4

 .parent-div { width: 50vw; height: 720px; position: relative; z-index: 1; } .image-wrap { background-position: 50% 50%; background-size: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } 

 you can use like this <div class="parent-div"> <div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div> </div> 

Answer 5

这是FlexBox属性变得非常有用的地方。 您可以设置align-items: center; （默认情况下）将容器上的所有子元素垂直居中。 这是一个示例： https : //jsfiddle.net/ks62qtns/

这样做的好处是您不需要知道布局中涉及的任何元素的尺寸-这对于响应式设计和/或动态内容非常有用。

Flex属性在现代浏览器中得到了很好的支持 。 您可能需要后备支持旧版本的IE（如果需要）

HTML：

<div class="container">
  <div class="content">
    <h1>
    Content. Any Content.
    </h1>
    <p>
    I might have anything in me!
    </p>
  </div>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #EEE;

  /* This is just to make a big container. You can set the dimensions however you like.*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  background: #89D485;
  padding: 2rem;
  text-align: center;
}

Answer 6

这是大多数开发人员遇到的最深思熟虑的问题。 如果对象在另一个对象内，则可以使用margin：0 auto; 在CSS中。 这将使左右对齐方式正确。 然后，这也适用于从小屏幕到大屏幕的所有媒体查询。

Answer 7

您可以使用jquery计算div和图像的宽度。

$(img).css({
    position: "absolute",
    left: ($(img).parent().width() - $(img).width()) / 2
});

这将意味着：（（（div的宽度）-（图像的宽度））/ 2

这将使图像完美居中。

Answer 8

只需这样做。将容器的属性设置为“ text-align：center”，使其成为inline-block元素，高度为100％，即可获得所需的内容。

.image-wrap{
    width: 50vm;
    height: 720px;
    text-align: center;
}
.image-wrap img{
    display: inline-block;
    height: 100vm;
}