国产真实乱了老女人视频,亚洲国产成人片在线观看无码,久久 国产 尿 小便 嘘嘘,97国产精华最好的产品亚洲

這種方式實現(xiàn)水平居中和上面使用text-align的方法有相同局限性。

div.center { background: hsl(60, 100%, 97%);}

div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}

注意： 必須使用display: block使margin: 0 auto對img元素生效。

使用display: table-cell, 而不是使用table標簽; 可以實現(xiàn)水平居中和垂直居中，但是這種方法需要添加額外的元素作為外部容器。

CSS:

.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}

.center-core img { width: 33%; height: auto;}

注意：為了使div不折疊必須加上width: 100%，外部容器元素也需要加上一定高度使得內容垂直居中。給html和body設置高度后，也可以使元素在body垂直居中。此方法在IE8+瀏覽器上生效。

這種 方案 有非常好的跨瀏覽器支持。有一個缺點就是必須顯式聲明外部容器元素的height：

.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Stephen在他的 博客 中演示了這種方案的幾種變化。

Chris Coiyer 提出了一個使用 CSS transforms 的新方案。 同樣支持水平居中和垂直居中:

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}

但是有以下幾種缺點:

CSS transform 在部分就瀏覽器上需要使用 前綴。

不支持 IE9 以下的瀏覽器。

外部容器需要設置height（或者用其他方式設置），因為不能獲取 絕對定位 的內容的高度。

如果內容包含文字，現(xiàn)在的瀏覽器合成技術會使文字模糊不清。

當新舊語法差異和瀏覽器前綴消失時，這種方法會成為主流的居中方案。

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}

在很多方面 flexbox 是一種簡單的方案， 但是它有新舊兩種語法以及早期版本的IE缺乏支持 （盡管可以使用display: table-cell作為降級方案）。

現(xiàn)在規(guī)范已經最終確定，現(xiàn)代瀏覽器也大都支持,我寫了一篇詳細的教程 教程。

在某些情況下比flexbox更全面：

.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

很簡單，calc允許你基于當前的頁面布局計算尺寸。在上面的簡單計算中， 50% 是容器元素的中心點，但是如果只設置50%會使圖片的左上角對齊div的中心位置。 我們需要把圖片向左和向上各移動圖片寬高的一半。計算公式為：

top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));

在現(xiàn)在的瀏覽其中你會發(fā)現(xiàn)，這種方法更適用于當內容的寬高為固定尺寸：

.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

我在 這篇文章 中詳細講解了calc。

這種方案和flex一樣有許多相同的缺點： 雖然在現(xiàn)代瀏覽器中有良好的支持，但是在較早的版本中仍然需要瀏覽器前綴，并且不支持IE8。

.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

當然還有 其他更多的方案。理解這六種方案之后，web開發(fā)人員在面對元素居中的時候會有更多的選擇。

【閱讀延伸】：

更多更全的美式裝修效果圖、吊頂裝修效果圖、家裝效果圖、飄窗裝修效果圖、浴室裝修效果圖，請持續(xù)關注房先森裝修公司：www.asyobhw.cn 我們會及時收集并更新！也可關注房先森官方微信公眾號sirfang_com，或者掃一掃下面的二維碼關注！