CSS CSS3 網頁開發

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

2019/07/17

梅問題-[教學] CSS3 translate 轉換屬性,讓DIV區塊中的元素垂直與水平居中
  自從有了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%;}


梅問題-[教學] CSS3 translate 轉換屬性,讓DIV區塊中的元素垂直與水平居中
Step2
接著在裡面的DIV加入translate屬性,當加入完畢後,會發現內層DIV區塊內的圖片整個向左上偏。
#css
.mid-box{
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
梅問題-[教學] CSS3 translate 轉換屬性,讓DIV區塊中的元素垂直與水平居中
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%;
}
梅問題-[教學] CSS3 translate 轉換屬性,讓DIV區塊中的元素垂直與水平居中
Step4
最後若要調整圖片的大小,可由.mid-box中設定width來控制圖片的大小,這樣是不是超簡單又方便的呀!下回當有需要時,不妨可試試看囉!
梅問題-[教學] CSS3 translate 轉換屬性,讓DIV區塊中的元素垂直與水平居中
#範例預覽

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