【塊狀元素置中，容器高度固定】 =>Div模擬表格的效果. 使用Div模擬表格的效果，把display屬性設為“table-cell”以及vertical-align屬性設為“middle” ...
首頁部落格如何讓區塊(DIV)在區塊(DIV)中垂直置中 ez 2013-08-28繼上次成功畫出水平置中之後，這次希望可以嘗試畫出區塊(DIV)在區塊(DIV)中垂直置中(專業速語會說讓塊狀元素中的塊狀元素垂直置中)要把粉紅色塊垂直置中 【塊狀元素置中，容器高度不確定】=>外層上下設置相同的padding【Samplecode】
.outer{
width:180px;
background-color:#CCC;
border:dashed#FFF1px;
padding-bottom:30px;
padding-top:30px;
}
.inner{
width:160px;
height:140px;
background-color:#F99;
}
→在外層的div設定相同padding-buttom、padding-top高度→優點：支援所有的瀏覽器，語法相當簡單→缺點：如果容器有固定高度就無法達到效果【塊狀元素置中，容器高度固定】=>Div模擬表格的效果使用Div模擬表格的效果，把display屬性設為“table-cell”以及vertical-align屬性設為“middle”【Samplecode】
.box{
width:180px;/*寬度一定要設定*/
height:200px;/*高度一定要設定*/
display:table;
}
.outer{
width:180px;
height:200px;
background-color:#CCC;
border:dashed#FFF1px;
display:table-cell;
vertical-align:middle;
}
.inner{
width:160px;
height:140px;
background-color:#F99;
}
把這個粉紅區塊垂直置
→在最外層的div設定display:table;→在內層的div設定display:table-cell;以及vertical-align:middle;→優點：優點：語法相當簡單，置中元素的內容超過範圍，區塊會自動調整，實際上也沒有高度限制了→缺點：IE8以下不支援，因為display:table語法在IE6、7不被支援所以，為了相容於IIE6、7，必須增加一個div，並使用hack進行ㄧ修正
.box{
width:180px;/*寬度一定要設定*/
height:200px;/*高度一定要設定*/
display:table;
position:relative;
float:left;
}
.outer{
width:180px;
height:200px;
background-color:#CCC;
border:dashed#FFF1px;
display:table-cell;
vertical-align:middle;
text-align:center;
*position:absolute;/*forIE6,7*/
*top:50%;/*forIE6,7*/
*left:50%;/*forIE6,7*/
}
.inner{
width:160px;
height:140px;
background-color:#F99;
*position:relative;/*forIE6,7*/
*top:-50%;/*forIE6,7*/
*left:-50%;/*forIE6,7*/
}
把這個粉紅區塊垂直置
→使用"*+屬性:值"宣告，當使用IE6、7使用讀取*語法→在最外層的div設定*position:relative;，讓後面的設定產生作用→外層元素設置*position:absolute跟*top:50%，讓區塊元素的左上角原點下降到容器元素中心點→對最內層設置*position:relative和*top:-50%和*left:-50%，讓區塊元素往上往左提升自己高度的一半 【塊狀元素置中，容器高度固定】=>絕對定位的方法使用position:absolute的絕對定位，並將高度設定為top:50%，以及margin-top設定為高度的一半margin-top:-70px;【Samplecode】
.outer{
width:180px;
height:200px;
background-color:#CCC;
border:dashed#FFF1px;
position:relative;
}
.inner{
width:160px;
height:140px;
background-color:#F99;
position:absolute;
top:50%;
margin-top:-70px;
}
把這個粉紅區塊垂直置
[說明]→在最外層的div設定*position:relative;，讓後面的設定產生作用→在最內層的div設定position:absolute;，使用絕對定位→在最內層的div設定top:50%;，讓內層定位在外層div高度的一半→在最內層的div設定margin-top:-70px; ，把內層高度往回拉一半→優點：語法簡短，支援所有瀏覽器→缺點：div高度固定，如果資料超過需要加上overflow:scroll，會出現scrollbar，會影響美觀度 【塊狀元素置中，容器高度固定】=>使用一個空達成這種方式是在要居中的元素前面設置一個空的
來達成【Samplecode】
html,body{
height:100%;
}
.outer{
width:180px;
height:200px;
background-color:#CCC;
border:dashed#FFF1px;
}
.empty_div{
float:left;
height:50%;/*相對於父元素高度的50%*/
margin-bottom:-70px;/*值大小為居中元素高度的一半*/
width:1px;/*onlyforIE7*/
}
.inner{
width:160px;
height:140px;
background-color:#F99;
clear:both;/*清除浮動*/
position:relative;
}
，並把屬性設定為height:50%;，margin-bottom為居中元素高度的一半，並且設定置左浮動float:left;→空白的
需要設width:1px;以相容IE7→在居中元素設定清除浮動clear:both;並且設定為相對定位 position:relative;→注意!如果居中元素是放在body中的話，需要設定height:100%;→優點：除IE7需要設定width:1px;之外，相容所有瀏覽器，而且置中元素的內容超過範圍，區塊會自動調整出現scrollbar→優點：另外若置中元素的父層是body，那即使視窗被USER拖曳拉小，div也一樣會置中→缺點：高度固定，IE7需要調整 參考資料：CSS制作水平垂直居中对齐、CSSVerticalAlign(用純CSS解決div垂直置中)、[CSS]如何做出水平&垂直置中標籤： CSS、 DIV垂直置中、 DIV置中、 HTML、 前端入門、 前端幼幼班本文章網址：https://www.ez2o.com/Blog/Post/HTML-Div-Vertical-Centerhttps://www.ez2o.com/Blog/Post/163我要留言我不是機器人！留言相關文章如何讓區塊(DIV)在區塊(DIV)中水平置中iphoneipadCSSfont-size異常解決方法如何讓區塊(DIV)在區塊(DIV)中垂直置中製作一個有Mouseover效果的Button(CSS+JS)如何讓文字或圖片元素在區塊(Div)中置中工商服務-廣告文章分類.NET(149)3D印表機(35)Android(5)Arduino(5)ASP(4)CSS(2)Cura(1)DD-WRT(17)Flash(2)HTML5(1)Hyper-V(7)IIS(8)JavaScript(8)jQuery(8)Kossel(23)Linux(27)MikrotikRouterOS(53)Mjpg-Streamer(3)MS-SQL(3)Node.js(1)NO-SQL(5)OctoPrint(10)Office(1)OrangePi(1)PHP(2)RaspberryPi(33)VisualStudio(6)VMWare(3)Webduino(2)Windows(11)Windows10IoT(15)WordPress(2)好用軟體(30)好站分享(31)安裝教學(15)作品(3)物聯網(19)修理(1)效能測試(1)開箱(109)網樂通(7)熱門文章USBPL2303HX在Win8Win8.1Win10無法使用解決辦法實測磊科NetcoreNW736300Mbps無線分享器(已改機NR235W)PPPoEServer設定及效能測試開箱中華電信光纖100M/40M雙線VDSL(ZyXELVDSL2P883)MikroTikRouterOS建置PPTPVPNServer連回公司、家中內部網路(固定IP、StaticIP、PPPoE、撥接上網適用)MikroTikRouterOS太難嗎？第一次設定就上手，極簡安裝篇如何讓文字或圖片元素在區塊(Div)中置中MikroTikRouterOS設定成分享器DHCPServer及NAT功能MikroTikRouterOS設定指定Port對外PortMapping虛擬伺服器(固定IP、StaticIP)多WAN適用Windows連接不同網路，網路名稱會隨著變更網路1網路2網路3...DD-WRT分享器TP-LINK刷機教學文章標籤.NET3D印表機AndroidArduinoASPCSSDD-WRTDIV置中FlashHTMLHTML5Hyper-VIISJavaScriptjQueryKosselKossel800KosselMiniLinuxMikrotikRouterOSMjpg-StreamerMS-SQLNO-SQLOctoPiOctoPrintRaspberryPiSmartPowerSSLVisualStudioVMWareWebDesignWebduinoWebServerWindowsWindows10IoTWireframeZenLoadBalancer好用軟體好站分享安裝教學作品物聯網前端入門前端幼幼班負載平衡修理原型組裝教學開箱雲端電源實戰網頁伺服器網路電源網樂通線框圖版權聲明在瀏覽或使用本網站時，視同使用者已完全接受並瞭解本聲明中所有規範、中華民國相關法規、一切國際網路規定及使用慣例，並不得為任何不法目的使用本網站。
在限於個人及非商業目的的情況下，使用者可依智慧財產權法律之相關規範，自由瀏覽及使用本網站，或下載本網站上明示提供下載之相關資料，但請註明出處。
任何商業機構或團體，非經本站同意，不得以任何形式轉載、重製、散布、公開播送、出版或發行本網站內容。
本網站內所有著作及資料，包括文字、圖片、影像等，均受中華民國著作權法相關條文保護，屬於ez2oStudio所有，未經本站合法授權，不得擅自重製、修改、編輯、轉載、或以其他方式非法使用。
本網站外連連結之著作權，屬原網站建構或維護單位所有。
任何個人或非商業機構網站均可自由以超連結方式連結本網站。
免責聲明本網站對於任何使用或引用本網站網頁資料引致之損失或損害，概不負責。
本網站亦有權隨時刪除、暫停或編輯本網站所登載之各項資料，以維護本網站之權益。
除法律規定在任何情況下，本網站對於：使用或無法使用本網站之各項服務。
經由本網站取得訊息或進行交易。
第三人在本網站上之陳述或作為。
其他與本網站服務有關之事項。
所導致之任何直接、間接、附帶、特別、懲罰性或衍生性損害，一概不負賠償責任。
