CSS3教學-利用CSS3中的Flex屬性,讓區塊內元素垂直&水平居中

梅問題-CSS3教學-利用CSS3中的Flex屬性,讓區塊垂直水平居中
  現在在設計網頁時,已經捨棄用table排版而改用DIV,再搭配CSS的樣式設定後,就可設計靈活的版型,甚至搭CSS3後,還可設計出RWD響應式網頁,雖然說透過div排版很方便,但當div區塊中再包個div、img或一串文字時,要把區塊中的元素水平與垂直居中時,則會發現到在設定上相當的麻煩,不像table來的那麼簡易,但現在只要透過CSS3中的fle屬性後,就可讓div區塊中的元素水平與垂直居中,比起用CSS2來的方便許多,因此有需要垂直居中的朋友,現在也一塊來看看吧!!

#html
<div class="container">
  <div class="content">CSS3區塊垂直居中梅問題</div>
</div>

#css
.container{
    width: 50%;
    height: 500px;
    background: #FF5B27;
    display: flex; /*顯示模式設為flex*/
}
.content{ width: 250px; height: 80px; background: #fff; margin: auto;/*當在flex下,設為auto時,就會垂直與水平居中*/ display:flex; align-items:center; /*文字水平居中*/ justify-content:center;/*文字垂直居中*/ }

#預覽
這時除了區塊居中外,就連區塊內的文字也會跟著一起居中。 梅問題-CSS3教學-利用CSS3中的Flex屬性,讓區塊垂直水平居中
#圖片居中
這時當圖片要居中時,只需把文字改成圖片即可。
#html
<div class="container">
  <div class="content"><img src='img.jpg'></div>
</div>

#預覽
梅問題-CSS3教學-利用CSS3中的Flex屬性,讓區塊垂直水平居中
[範例預覽] [範例下載]

相關文章

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座