實現圖片始終居中顯示於瀏覽器窗口中心位置

時間 2019-12-26

標籤實現圖片始終居中顯示瀏覽器窗口中心位置欄目瀏覽器简体版

原文原文鏈接

盒模型

在敲代碼以前，首先創建一個盒模型，這讓寫代碼的時候變得思路清晰。css

本案例中，所要實現的是圖片居中顯示，超出瀏覽器窗口部分的圖片隱藏。所以，盒模型如圖：html

圖片以瀏覽器窗口做爲定位元素，居中顯示。超出瀏覽器窗口部分的圖片則被隱藏。瀏覽器

法一：body元素做爲父元素，圖片採用img元素

< HTML >字體

<body>
    <img src="圖片路徑地址" alt="圖片說明" />
</body>

結構部分就是這麼簡單，咱們所須要的實際內容只有一張圖片。剩下的則是CSS所完成的部分。spa

< CSS >code

*{
    margin:0;/* 1 */
    padding:0;/* 2 */
}
html,body{
    overflow-x:hidden;/* 9 */
}
body{
    position:relative;/* 3 */
    min-width:圖片寬度的80%;/* 10 */
    min-height:圖片的高度;/* 8 */
}
img{
    position:absolute;/* 4 */
    left:50%;/* 5 */
    top:0;/* 6 */
    margin-left:-圖片寬度的一半;/* 7 */
}

說明：註釋的部分是代碼書寫順序。咱們並非一口氣將全部想要的效果直接實現的，而是從最基本效果一步步添加實現的。htm

首先，咱們初始化瀏覽器信息，內外邊距所有設置爲0；其次，咱們以body做爲定位元素，因此要設置body元素的定位方式爲相對定位 ; 圖片以body元素居中定位，因此要設置定位方式，左右偏距，以及左外偏距爲負的圖片寬度的一半，這樣就實現了圖片中心點位於瀏覽器窗口，即body中心位置。圖片

注意：一旦設置了絕對定位，必定要設置left和top的值，即便上述中不設置top的值沒有任何影響狀況下，也要設置。文檔

當瀏覽器窗口寬度小於圖片寬度時，超出窗口部分的圖片就會溢出，body元素出現滾動條。爲了消除滾動條，咱們添加/* 9 */這條語句。it

注意：消除瀏覽器窗口滾動條，標準寫法是html,body{overflow:hidden;}，而不是body{overflow:hidden;}

此時，基本徹底實現了功能。可是你們能夠嘗試下，當窗口的寬度拉到很小時，因爲圖片始終居中顯示，圖片兩側超出部分的內容所有被隱藏，使得圖片只能顯示很是小一部份內容，這顯然是不行的。咱們但願，當窗口寬度小到必定程度時，圖片再也不發生位置移動。所以，咱們添加了/* 10 */這條語句。設置body的最小寬度，當窗口寬度小於body最小寬度時，body寬度將再也不發生變化，天然，img元素以其做爲定位元素，img的位置也不會發生變化了。至於最小值取多少，你們能夠本身設定。取圖片的80%爲最小值，能夠保證圖片大部分有效信息將獲得保留。

注意：img元素絕對定位後，對於body父元素來講至關於不存在。此時，body元素的高度爲0（不存在任何內容）。所以，爲了可以讓img元素正常顯示，須要設置body元素的高度，且爲了可以增長新的內容，應該設置min-height屬性。

思考：以body做爲父元素進行定位，有什麼缺點？

答：顯然，img絕對定位後，脫離了文檔流（也就是說，對於img元素後面的內容，彷彿img元素不存在了，其餘內容會在img元素的位置顯示內容，而不是img下面顯示內容。）好比：

<body>
    <img .../>
    <p>上面是一張圖片</p>
</body>

若img元素絕對定位了，則位於img元素後面的p元素，它的內容你們可能就看不到了。緣由是，p元素的內容顯示在img圖片的位置，而img圖片又將p元素的內容覆蓋了。你們若想查看p元素內容，能夠給p元素設置padding-top，值爲圖片的高度，則能夠看到p元素的內容了。

提醒：關於絕對定位，我還想說兩點內容。

第一，設置完絕對定位後，是否要給元素設置width和height？

答：通常不須要。絕對定位是對元素進行壓縮，壓縮到最小尺寸。上述中，咱們對img元素絕對定位，img元素是一個行級元素，是沒法被壓縮的。也就是說，圖片的尺寸是多少，絕對定位之後img元素的寬高仍是多少。所以，沒有必要再從新指定img元素的寬高了。然而，有些狀況下，是須要指定width值的。好比，一個塊級元素，div或ul。這裏用ul元素更能說明問題。假設，原來的ul顯示效果示意如圖：

我是第一個
我是第二個

ul下的每個li元素單獨佔據一行。當ul絕對定位之後，顯示效果仍然沒變，只是本來li元素是佔據整行的寬度，如今被壓縮成實際所須要的寬度了。此時，若是咱們但願ul中的每一項顯示效果示意如圖所示：

●我是第一個 ●我是第二個

即水平顯示，則咱們能夠對ul設置width值，width值足夠容下兩個li元素內容時，天然就水平分佈了。

綜上，該問題的回答是：高度是不須要設置的。由於一旦設置了高度，則不可以擴展內容。寬度視狀況而定，對於圖片這樣的行級元素，無需設定；對於塊級元素，能夠設定width值。

第二，絕對定位是怎麼個意思，上述舉的p元素內容被覆蓋怎麼理解？

答：絕對定位，你們能夠想象成上升一個高度，即浮起來了。好比上述舉例中，img絕對定位，它浮起來了，後面的p元素天然鑽了空子，佔據它原來的位置，而且在img元素的下方。說道這，你們就知道爲何絕對定位後會增長一個屬性，叫作z-index。只有絕對定位的元素纔有該屬性，用來講明該元素浮動了多高。實際上，就是從平面，變成了三維座標。有人可能會想，img元素不是浮起來了嗎，咱們將它z-index設置爲負值，不就到z軸的負數部分，不就能顯示p元素內容了嗎？其實是這樣的，對於沒有浮動的元素，至關於z-index等於0。所以，咱們設置img的z-index爲-1，則能顯示p元素的內容了。（若仍然看不出，多是由於p元素的字體顏色，能夠設置p元素字體顏色爲白色或其餘易觀察顏色。）

法二：div元素進行定位，圖片採用img元素

大部分時候，咱們並不想對body元素進行操做，也不想以body元素做爲定位元素。同時，以body做爲定位元素，img絕對定位之後，後續元素收到絕對定位影響沒法正常顯示（後續會講如何解決該問題）。所以，咱們設置一個空元素div，以div做爲定位元素。盒模型如圖：

設置一個空元素div，讓該div居中瀏覽器窗口。圖片元素以該div元素進行絕對定位，超出瀏覽器窗口部分圖片被隱藏。

< HTML >

<body>
	<div id="container">
	    <img src="圖片地址" alt="圖片說明" />
    </div>
</body>

< CSS >

*{
    margin:0;/* 1 */
    padding:0;/* 2 */
}
html,body{
    overflow-x:hidden;/* 10 */
}
#container{
    width:800px;/* 3 */
    margin:0 auto;/* 4 */
    position:relative;/* 5 */
    height:圖片高度;/* 11 */
}
#container img{
    position:absolute;/* 6 */
    left:50%;/* 7 */
    top:0;/* 8 */
    margin-left:-圖片寬度的一半;/* 9 */
}

說明：首先仍是初始化；設置#container元素居中，因此設置了width值，該值你們能夠本身取，決定圖片最小有效部分的大小，而後做爲定位元素設置爲相對定位；設置圖片絕對定位，及定位位置；爲了消除滾動條，增長/* 10 */這條語句；此時會發現，圖片不見了！這是由於被overflow隱藏了。爲了顯示出圖片，須要給做爲定位元素的父元素，即#container元素設置一個高度，這個高度就是顯示的圖片的高度，所以增長了/* 11 */這條語句。

如今咱們在img元素下面也加入一個p元素，看看效果。

<body>
    <img .../>
    <p>上面是一張圖片</p>
</body>

發現，p元素的內容出如今圖片的後面，彷彿圖片沒有脫離文檔流同樣，咱們能看到啦！

實際上，這是由於咱們給#container設置了高度的緣由，這個高度等於圖片的高度，所以圖片雖然脫離了文檔流，可是被顯示地撐了起來，這就是解決絕對定位對後續元素影響的方法：給絕對定位的元素套一個父元素，並設置父元素的高度，撐起來！

好比法一中，若想消除img定位的影響，就能夠給img套一個div，而後設置div的高度爲圖片的高度就好了。

總結：根據不一樣的盒模型，還有好多種實現方法。同時，img元素也能夠用背景圖來代替，這樣的話，又衍生出好多盒模型。你們本身嘗試下吧，有問題或文章哪些不足與錯誤，請你們留言不吝賜教。

須要牢記的一些東西：

1.設置了絕對定位，必定要設置left和top

2.絕對定位元素會浮起來，視狀況設置絕對定位的寬度。

3.絕對定位元素大小超過父元素大小，不會產生溢出。實際上，父元素已經不將絕對定位的元素認做‘兒子’了，看做不存在。

4.消除絕對定位影響的方法，是給做爲定位的父元素設置一個高度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。