css 置中

1. div中的「單行」文字垂直置中：
line-height與height的值一樣即可。

div
{
height: 100px;
line-height: 100px;
}

置中

2. div中的div垂直置中：
方法一：藉由將div模擬成table，再使用屬性vertical-align

html:

<div id="wrap">
     <div id="cell">
          <div id="content">
               要被置中的內容
          </div>
     </div>
</div>

css:

#wrap 
{ display:table; }
#cell
{ display:table-cell; vertical-align:middle; }

方法二：
上面放個div把要置中的內容往下擠

html:

<div>
     <div id="floater"></div>
     <div id="middle"></div>
</div>

css:
#floater的margin-bottom是#middle的height的-0.5倍

#floater
{ 
float:left; 
height:50%; 
margin-bottom:-200px;
width:1px; /* only for IE7 */
}

#middle
{

clear:both; 
height:400px; 
position:relative; }

方法三：
html:

<div id="outer">
    <div id="inner">

</div>
</div>

css:

#outer
{
     position: relative
}
#inner
{
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin:auto;
}

3. 表格置中：
table裡的td預設就是置中，也可以用vertical-align來決定垂直的排版
，但是這個屬性只對td跟img有用
可以參照：http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

4. 水平置中：
關於水平置中可以參考這個網頁，裡面講得很詳細
http://www.w3schools.com/css/css_align.asp

5. 使用jQuery把div放在螢幕中間
jQuery加入以下function：

jQuery.fn.center = function () {
    var relativeParent = null;
    $(this).parents().each(function(){
        if( $(this).css("position") == "relative" ){ 
             relativeParent = $(this); 
             return false; 
        } 
     });
    var leftShift = ( relativeParent == null )? 0 : parseInt(relativeParent.offset().left);
    var topShift = ( relativeParent == null )? 0 : parseInt(relativeParent.offset().top);
    
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                $(window).scrollTop()) - topShift + "px";
    this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                                $(window).scrollLeft()) - leftShift + "px");
    return this;
}

執行方式：

$(element).center();

http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen




我是看這個網頁的，裡面還有更多的置中方式
http://blog.yam.com/hanasan/article/35806444