像設置背景位置一樣在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;
}