這是在HTML中垂直+水平居中圖像的合法方式嗎？

我遇到以下技術，將圖像垂直居中放置在DIV元素中。這是在HTML中垂直+水平居中圖像的合法方式嗎？

<div> 
    <img src="someimage.png" /> 
</div> 

div { 
    position:relative; 
    width:400px; 
    height:300px; 
    border: solid 1px #cccccc; 
} 

img { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
}

創建一個搗鼓在這裏：http://jsfiddle.net/MryZv/1/

我沒有在網上找到引導到這種技術的任何提示。

我有遺漏嗎？使用「安全」嗎？

來源

2013-06-02 Tal Bereznitskey

您可以使用'display：table-cell'將內容垂直對齊而不用_absolute positioning_。 [示例]（http://jsfiddle.net/vucko/MryZv/2/） – Vucko

@Vucko，問題中顯示的技術很有用，我喜歡它。我在問爲什麼沒有人在討論垂直居中時提及它？它有時不起作用嗎？ –

我會說你必須確定圖像比div小;也就是說，您沒有調整大小。 – vals

在部分10.6.4和10.6.5（絕對定位，非替換/替換元素）此方法是公創立和記錄在CSS 2.1規範：

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

的高度絕對定位的元素根據以下約束來計算：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' 
+ 'height' 
+ 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' 
= height of containing block

對於映像，該高度可以被設置爲，除非你限制它，否則圖像的固有高度。

如果margin-top和margin-bottom使用auto值，那麼這些邊緣是通過假設它們是相等的，這允許垂直定心發生計算的。

類似的邏輯適用於計算寬度。

除非你有大的圖像可能會產生溢出條件，這是一種方法，將在符合CSS 2.1的瀏覽器。

來源

2013-06-02 21:23:49

換句話說，它是haxy，但它的工作原理：p –

@Kolink什麼？不，這絲毫不怯懦 – user123444555621

這是在HTML中垂直+水平居中圖像的合法方式嗎？

回答

相關問題