CSS, CSS3, 網頁設計

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

2016/04/12
梅問題-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屬性,讓區塊垂直水平居中
[範例預覽] [範例下載]