關於CSS實現圖片垂直水平居中

0
60

圖片居中問題經常遇到,今天系統性的總結一次,日後有別的方法再另行補充,
水平居中很簡單,今天不多做敘述,先都用使用text-align:center。
接著我們來看一下垂直置中,來看看下面2個主要範例:

1.使用背景background

See the Pen dOgyKe by frank (@frankdo) on CodePen.

關鍵在於對background的使用,http://www.w3school.com.cn/cssref/pr_background.asp ,其中有關於background的詳細使用。
當想要在圖片上疊上文字時,採用背景法是非常方便的。

 

2.使用絕對佈局

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”MbPWxJ” default_tab=”html,result” user=”frankdo”]See the Pen MbPWxJ by frank (@frankdo) on CodePen.[/codepen_embed]

絕對佈局簡單俐落,就是把要垂直置中的元素(稱A),先讓top:50%,等於說是先把元素往下推到父元素的一半,再用transform:translate(-50%,-50%),往上推要置中元素的一半距離做微調,那這樣就會剛好垂直置中。那同理,水平置中也是一樣道理。

 

結論:

以上2種其實是當在切版時候是最常用到的解決辦法,當然要垂直置中仍有許多其他種方法存在,但基本上這2種方式可以解決80%以上切板問題,提出來給大家做使用

 

 

 

frankbite-關注UI設計/前端/網頁,如果您喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將為您提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03