[教學] CSS3 translate 轉換屬性，讓DIV區塊中的元素垂直與水平居中

2019/07/17

　　自從有了CSS後，讓網頁更有變化性，同時在CSS3推出後，也讓網頁支援各種裝置，甚至還可以製作動畫，且效能佳、讀取速度快，真的只能說超方便的，但在眾多方便中，卻有一個不便，那就是將DIV區塊中的元素居中，不是改變屬性，就是裡面要塞些假元素，或是偽元素才能將DIV區塊中的元素垂直水平居中，說真的比早期用Table還要來的麻煩，而最近梅干發現一個超簡易的方法，則是利用CSS3的translate屬性，就能快摙的將DIV區塊中的元素垂直與水平居中啦！

Step1
首先，先加入二個DIV，並且將外層DIV的positioni設為relative。
#html

<div class="div-box">
    <div class="mid-box">
    <img src="https://photo.minwt.com/cc0/013.jpg">
  </div>
</div>

#css

.div-box{
  width: 800px;
    height: 800px;
    border:solid 3px #333;
    position: relative;
}
.mid-box{

}
img{max-width:100%;}

Step2
接著在裡面的DIV加入translate屬性，當加入完畢後，會發現內層DIV區塊內的圖片整個向左上偏。
#css

.mid-box{
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

Step3
接著再加入絕對位置屬性，這樣就可將DIV區塊內的元素居中啦！
#css

.mid-box{
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 position: absolute;
 top:50%;
 left:50%;
}

Step4
最後若要調整圖片的大小，可由.mid-box中設定width來控制圖片的大小，這樣是不是超簡單又方便的呀！下回當有需要時，不妨可試試看囉！
梅問題-[教學] CSS3 translate 轉換屬性，讓DIV區塊中的元素垂直與水平居中

#範例預覽

See the Pen
CSS3-translate-Center&Middle by minwt (@minwt)
on CodePen.

css3教學, css區塊居中, css居中, css教學, translate屬性,

熱門關鍵字:

最新文章

aaPanel教學：免費VPS主機管理工具，一鍵部署WordPress超簡單

aaPanel教學：免費VPS主機管理工具，一鍵部署WordPress超簡單

取代 Jetpack 的最佳選擇：Koko Analytics 免費易上手，無需安裝追蹤碼即可使用

取代 Jetpack 的最佳選擇：Koko Analytics 免費易上手，無需安裝追蹤碼即可使用

[教學] CSS3 translate 轉換屬性，讓DIV區塊中的元素垂直與水平居中