作者yshlptt (小y)
看板Web_Design
标题Re: [问题] 上下置中
时间Tue Aug 19 16:59:42 2014
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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1408438784.A.E2E.html
1F：推 tomin: 推 清楚 08/19 18:43
2F：推 sycc: 方法一第一次听到，长知识推。请问缺点是什麽? 08/20 23:05
好坏视排版的需求而定，看现有的版面需要的设定是什麽。
display: table，在排版上常不如 block 之类的方便，
想要用 block 来排势必要在外面多包一层。
用绝对定位排法的话 position 就不能用 static，
虽说 relative 在大部分情况下行为很类似，
但如果内部有其它元素不想被限缩在 relative 的范围内就需要重构一下。
※ 编辑: yshlptt (118.163.10.190), 08/21/2014 11:00:15