將圖片水平、垂直居中的幾種方法

假設有一個盒子，我們要在其中放置圖片，使其居中，有哪些辦法呢？（想到了茴香的“茴”字幾種寫法……）

 

 

 

 

1、首先是傳統的，text-align水平居中，line-height垂直居中。

 

<div style="width: 1000px; height: 400px; background-color: darkslategrey; overflow: hidden;">
    <div style="width: 300px; height: 200px; margin: 50px auto;
background-color: lightskyblue; text-align: center; line-height: 200px; font-size: 24px;">
        你好！！！Any<img src="image/test.jpg" alt="test" style=" vertical-align: baseline;">
    </div>
</div>

 

當設置 line-height=height 時，單行元素會自動垂直居中——實際上不算很垂直……不信你可以用標尺自己量一下。

而<img>也是屬於行內元素。不顧哦他的對其方式受到 “vertical-align” 的影響，默認值為 baseline，也就是圖片底端對齊的是文本的【基線上】。而這個基線受到文本字號大小的影響，當字號為0時，圖片底端對齊父元素垂直中軸。

 

需要對【圖片本身】設置 vertical-align = middle，讓他對齊中軸。

不過可以看到，並沒有完整對齊……

所以請將父盒子的字體大小調整為0！！！即使父盒子里沒有文本

 

 

 總結：給父盒子設置如下屬性，就能使img保持居中。

.box {
        width: 100%; /*寬度是要的，否則怎么水平居中呢？高度同理*/
        height: 200px; /*保險起見，還可以給子元素img設置最大寬高*/
        text-align: center;
        line-height: 200px;
        vertical-align: middle;
        font-size: 0
    }

 

 

 

2、父元素設置為彈性盒子

 

<div style="position: relative; width: 500px; height: 200px; margin: 50px auto; background-color: lightskyblue;
    display: flex; align-items: center; justify-content: center">
        <img src="image/test.jpg" alt="test">

<!--請無視以下兩條輔助線，是我用來演示交叉中心的-->

        <div
                style="position: absolute; top: 50%; width: 100%; height: 2px; background-color: rgba(255,0,0,.5);
                margin-top: -1px">
        </div>
        <div
                style="position: absolute; left: 50%; top: 0; width: 2px; height: 200px; background-color:
                rgba(255,0,0,.5);
                margin-left: -1px">
        </div>
    </div>

 

 

 彈性盒子目前鄙人尚未使用到，不過就是有點單純了解。

重點就是給<img>父盒子添加如下設置即可。

display: flex; 
align-items: center; 
justify-content: center

注意，align-items 默認值為 strech 會將圖片本身作拉伸！所以需要手動設置為 center（即使你不想居中）像這樣

 

 

 

優點是不需要知道父盒子的大小以及圖片本身大小。

 

3、萬能的margin || padding

<img src="image/test.jpg" alt="test" style="display:inline-block; /*padding: 68px 206px*/ margin: 68px 206px">

 

 

 這個方法沒啥好說的，就是添加 內\外邊距 ，通過距離把控，人工使其居中。復用性極差，而且需要提前知道 父盒子尺寸 與 圖片尺寸，不建議使用。

 

4、超級好用的定位！

<img src="image/test.jpg" alt="test" style="position: relative; top: 50%; left: 50%">

 

 

可以看出，此時並沒有位於正中心，因為定位和margin、padding一樣，都是以盒子邊緣來判斷距離（這不廢話么……這里我還手打了樣式，結果抬頭發現有設置刪除線的，好蠢啊……）

所以需要適當得修改位置使其居中。以下在 <img> 標簽里增添

img {
transform: translate(-50%,-50%);/*坐標軸為第四象限那樣，右下為正向，反之負向。這里根據你之前定位來決定相反的偏移量使其居中。復合寫法為 translate(x,y)*/
}

因為 translate 的位移是根據元素本身大小來的。所以我們不需要像margin那樣丈量 元素本身 以及 父盒子的寬高！十分方便。

 

 

 

注意，這樣存在一個問題。那就是如果你要設置 :hover 樣式的話——譬如圖片垂直移動，那么可能會有所沖突……

.test1:hover img {
        transform: translateY(-10px);
    }

    .test1 img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 1.5s;
    }

因為呢，這里的 .test1:hover 的樣式層疊性挺高的。給test1前面再加上一個類名聲明的話就能保證圖片使用靜態下的樣式了！

不過這樣又會導致本身 hover 的動畫效果失效……所以要不給父盒子添加動畫效果而非單純<img>標簽，要不負偏移修正效果使用 margin 來達成——這樣又需要知道圖片大小了，有點畫蛇添足了……

 

 

把父盒子的層級設置低一些，並且不要設置背景顏色，這樣就和圖片本身移動沒什么區別了。

.test1:hover{
        transform: translateY(-20px);
    }

    .test1 {
        transition: all 1.5s;
    }

    .test1 img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

 

 

 

題外話，如果對文字居中的話，最好使用第一種方法。定位不太靠譜，因為行內元素先是 left 碰到了邊界，他就會自動換行，之后即使通過 translate 偏移回去，換行也不會停下

<span style="position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); ">你好我的朋友，天氣真好啊</span>

 

 

需要強制該行內元素禁止換行 white-space: nowrap ，這樣他就會正常以一行展示了。

<span style="position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); white-space: nowrap">你好我的朋友，天氣真好啊</span>

 

 

 

與君共勉。