1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS3教學-利用CSS3中的Flex屬性,讓區塊內元素垂直&水平居中

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

2016/04/11

梅問題-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屬性,讓區塊垂直水平居中


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