是否有任何方法可以在div中完美設置標記中心，無論該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>

非常感謝！

來源

2017-02-15 Huy Le

你可以使用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確實

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

來源

2017-02-15 07:23:15 LGSon

非常感謝！也許這是唯一的方法，而不是使用顯示器靈活:) –

@ HuyLe它是其中之一...簡化了一點點 – LGSon

@ HuyLe添加了幾個樣本 – LGSon

你可以做到這一點，像這樣：

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

來源

2017-02-15 03:20:20 user6003859

比使用左右邊距更好的方法是使用** transform：translate（-50％，-50％）**。通過使用它，你不必確切地知道圖像的寬度和高度:) –

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

來源

2017-02-15 03:31:38

添加一些解釋和回答這個答案如何幫助OP在修復當前問題 –

很確定他讓我錯了！ :)在parent-div內部必須是img標籤（） –

您可以輕鬆地使用Flex性能居中。演示here

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

來源

2017-02-15 03:31:55

您應該使用實時代碼片段將演示放在SO中。 – Soviut

除了使用flex之外，還有什麼方法嗎？謝謝 –

這是Flexbox的性能變得非常有用。您可以將容器上的設置爲（默認情況下）垂直居中任何子元素。以下是一個示例：https://jsfiddle.net/ks62qtns/

這樣做的好處是，您無需知道佈局中涉及的任何元素的尺寸 - 這對於響應式設計和/或動態內容非常有用。

在現代瀏覽器中，Flex屬性爲reasonably well supported。您可能需要回退，支持舊版本的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; 
}

來源

2017-02-15 03:35:20 Beejamin

試試下面的代碼：

CSS

.image-wrap { 
    width: 100%; 
    height: 30%; 
    background: url('pic_mountain.jpg') no-repeat center center/auto 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

HTML

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

來源

2017-02-15 03:39:42 Mamun

爲什麼當你有圖像時，你必須設置背景？ –

這是最仔細想想，大多數開發者遇到的問題。如果對象位於另一個對象內，則可以使用margin：0 auto;在CSS裏面。這將使左右方向排列正確。這也適用於從小屏幕到大屏幕的所有媒體查詢。

來源

2017-02-15 03:43:23

你可以使用jquery來計算div和圖像的寬度。

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

這將意味着：（（DIV的寬度） - 圖像（寬度））/ 2

這將完全居中圖像。

來源

2017-02-15 03:46:27

只是這樣做。設置容器的屬性「文本對齊：中心」，使它是內嵌塊元素和100％的高度，然後可以得到你想要的。

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

來源

2017-02-15 05:02:06 FernAbby

div中的中心圖像像設置背景位置

回答

HTML：

CSS：

相關問題