Re: [問題] 上下置中

[yshlptt (小y)]

Hi,

我目前知道兩種可以把區塊垂直置中的方法，
兩種方式各有好壞，請自行依排板需求選擇

一、使用絕對位置定位
把 container 元素設為 position: relative(或依需求設定 absolute)
再把內容元素設定為 position: absolute，
並加上 margin: auto; top: 0; bottom: 0; 這三組設定即可

範例：
http://jsfiddle.net/elin/ug3L3ut0/

二、使用 display: table-cell
這個作法要多包一層 tag，不過 CSS 設定相對簡單一些，
簡單來說就是在最外層設定 display: table，
第二層設定 display: table-cell; vertical-align: middle;
這樣一來內容元素就會垂直置中

範例：
http://jsfiddle.net/elin/4zprbaq5/

※ 引述《sean72 (.)》之銘言：
: http://jsbin.com/notifucigedo/4/edit?html,css,output
: 隨意用了bootstrap做了一個footer
: 如果我故意將.footer height調成150px
: 我該如何將.navbar-text的放在footer上下的中央?
: 為什麼我下面的css不起做用呢?
: .footer-container{
:   vertical-align: middle;
: }
: 謝謝

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.10.192
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1408438784.A.E2E.html
推 tomin: 推　清楚
推 sycc: 方法一第一次聽到，長知識推。請問缺點是什麼?
好壞視排版的需求而定，看現有的版面需要的設定是什麼。
display: table，在排版上常不如 block 之類的方便，
想要用 block 來排勢必要在外面多包一層。
用絕對定位排法的話 position 就不能用 static，
雖說 relative 在大部分情況下行為很類似，
但如果內部有其它元素不想被限縮在 relative 的範圍內就需要重構一下。
※ 編輯: yshlptt (118.163.10.190), 08/21/2014 11:00:15