【HTML】div 垂直置中 - 程式隨筆

本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。

說實話這並不太容易，雖然不像水平置中{margin:0 auto;} 那樣單純, ... 程式隨筆 Togglenavigation 2012年9月14日星期五 【HTML】div垂直置中   晚上8:17    TOYO 以下內容完全節錄自 http://blog.yam.com/hanasan/article/35806444 作者 本次要介紹的是CSS垂直置中(VerticalAlignwithcss)的完整解決整理。

說實話這並不太容易，雖然不像水平置中{margin:0auto;}那樣單純,但仍有幾種方式可以作到，以下共有五種方式一一介紹。

每種使用方式各有其優、缺點，端看自己要置中的內容是「區塊」或是「文字」來取捨。

方法一 使用CSStable-cell屬性來完成，什麼是table-cell？簡單說就是針對一些htmlobject附于它table的屬性(詳見此)，如果曾經使用過table來排版的網頁開發者，應該知道td的既有屬性valign，古早以前根本不會有垂直置中的問題，因為td下個valign="middle"就行了。

而table-cell即是可以將div模擬成表格(table)的儲存格(td)，讓原本不存在vertical-align的div可以使用。

SampleCode HTML 要被置中的內容 CSS #wrap{display:table;} #cell{display:table-cell;vertical-align:middle;} 優點: 因為是CSS2.1釋出的標準屬性，正規的解決方法。

被置中的內容增加後，垂直置中的block會自動調整。

缺點: 支援性不佳，IE8以上才支援(IE7以下不支援display:table語法) 太多巢狀標籤(有種回到過去table排版的fu) 方法二 此方法適用在定義了絕對定位(absolute)的div,將其top設置為50%,再設置與div高度一半的「負」值margin-top，意謂著使用本方法必須固定div的高度。

SampleCode HTML 要被置中的內容 CSS #center{ position:absolute;height:400px;top:50%;margin-top:-200px;/*div高度的一半*/ } 優點: 程式碼簡短，且無需為了「垂直置中」的目的多寫巢狀標籤 所有browser都支援，泛用性高 缺點: div高度需固定，若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見 方法三 在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值) SampleCode HTML 要被置中的div CSS html,body{ margin:0;padding:0;height:100%; } #floater{float:left;height:50%;margin-bottom:-200px; width:1px;/*onlyforIE7*/ } #middle{clear:both;height:400px;position:relative;} 優點: 所有browser都支援(Note:IE7必須在#floater追加width:1px才work!) 當內容增加時，垂直置中的div不會被切掉，而是會自動出現scroll-bar 缺點: 沒甚麼缺點，真要說就是一樣高度得固定。

另外若置中物件的父層是body,即使視窗被USER拖曳拉小了，div也一樣會唯持置中(笑) 方法四 本法使用在同樣是絕對定位(absolute)的div上，固定高度，並定義top:0;bottom:0;和廣為被應用的 {margin:0auto;}作div水平置中原理類似 SampleCode HTML 我要被置中啦~ CSS #middle{ position:absolute;width:70%;height:280px; top:0;bottom:0;left:0;right:0;margin:auto; } 優點: 簡單 缺點: 不支援IE7(含)以下 如果容器不夠裝內文,也不會有scrollbar自動出現... 方法五 此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時),container除了設置高度之外，同時也將行距(line-height)設置與高度相等。

SampleCode HTML 一行文字要被置中啦 CSS #content{font-size:32px;text-align:center;height:150px;line-height:150px;} 優點: 簡單 所有browser都支援(evenIE6!) 即使內容溢出也不會被切掉 缺點: 只有單行文字適合 若div寬度固定，一當有長文字爆行時會很醜，務必小心使用。

以上列出五種使用純CSS(不加js)達成divverticalalign(垂直置中)的藥方，可以綜合搭配使用，也可視情況單獨使用... 以電子郵件傳送這篇文章BlogThis！分享至Twitter分享至Facebook   CSS/HTML   NoComments 較新的文章 較舊的文章 首頁 0 意見: 張貼留言 訂閱： 張貼留言(Atom) StevenTsai PopularPosts 【C#】非同步執行(執行緒)透過委派的方式與UI溝通 【HTML】三個DIV並排，使中間的DIV自動填滿版面 【MVC教學】2.什麼是MVC 【Swagger】活著的API規格書 【HTML】div垂直置中 【爬蟲】透過SeleniumWebDriver爬網頁，以Instagram為例 【JQuery】AJAX非同步上傳圖片 【JavaScript】showModalDialog運用 【C#】FormsAuthentication驗證模式 【MVC教學】1.工欲善其事、必先利其器VisualStudio Categories 神奇事件 (1) 資料結構 (1) AJAX (3) Android (1) ASP (24) Async (1) AutoMapper (4) Azure (4) BindingSource (1) C# (35) CI/CD (4) Config (1) CSS (3) DataGridView (1) Delegate (2) EntityFramework (4) Excel (1) ExtensionTools (1) FluentAssertions (1) FluentValidation (3) FormsAuthentication (1) Git (1) GridView (6) HTML (5) IIS (1) ios (25) JavaScript (4) JQuery (10) JSON (2) LINQ (4) LINQTOSQL (3) MVC (19) MVC教學 (6) QuadTree (1) RazorEngine (1) Refactor (3) RegularExpression (3) Selenium (1) SharePoint (11) SQL (18) Swagger (2) swift (25) Tools (1) UnitTest (16) VM (1) VSTS (4) WebAPI (3) webconfig (3) WinForm (5) Xamarin (1) BlogArchive ►  2018 (15) ►  五月 (2) ►  四月 (3) ►  三月 (1) ►  二月 (2) ►  一月 (7) ►  2017 (19) ►  十一月 (4) ►  四月 (7) ►  三月 (3) ►  二月 (1) ►  一月 (4) ►  2016 (26) ►  十二月 (1) ►  十一月 (3) ►  十月 (5) ►  九月 (1) ►  八月 (6) ►  七月 (3) ►  六月 (1) ►  三月 (3) ►  二月 (1) ►  一月 (2) ►  2015 (36) ►  十二月 (4) ►  十一月 (1) ►  十月 (3) ►  六月 (1) ►  三月 (27) ►  2014 (5) ►  十一月 (1) ►  八月 (1) ►  六月 (1) ►  五月 (1) ►  三月 (1) ►  2013 (37) ►  十二月 (2) ►  十一月 (1) ►  十月 (1) ►  九月 (6) ►  八月 (1) ►  七月 (2) ►  六月 (3) ►  五月 (11) ►  四月 (8) ►  一月 (2) ▼  2012 (43) ►  十二月 (4) ►  十一月 (4) ►  十月 (7) ▼  九月 (3) 【C#】當TextBox設定為ReadOnly、Enable時抓值 【HTML】div垂直置中 【C#】webconfig，允許未登入能存取的頁面 ►  八月 (6) ►  七月 (4) ►  五月 (1) ►  四月 (2) ►  三月 (12)