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

梅干 2016/04/11 1 分鐘閱讀

　　現在在設計網頁時，已經捨棄用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>

#預覽

[範例預覽] [範例下載]

標籤

熱門關鍵字:

最新文章

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

你可能也會喜歡