在樣式布局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單：對文字，只需要對其父級元素設定text-align: center;，而對div等塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如**元素中的
、、等，而像、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要通過別的方法去實現元素的垂直居中，下面我總結了幾種了常用垂直居中方法。
單行文字垂直居中
對於單行文字，我們只需要將文字行高(line-height)和所在區域高度(height)設為一致即可：
xml/html code複製內容到剪貼簿
多行文字垂直居中
多行文字垂直居中分為兩種情況，乙個是父級元素高度不固定，隨著內容變化；另乙個是父級元素高度固定。
父級元素高度不固定
父級高度不固定的時，高度只能通過內部文本來撐開。這樣，我們可以通過設定內填充（padding）的值來使文字看起來垂直居中，只需設定padding-top和padding-bottom的值相等：
xml/html code複製內容到剪貼簿
父級元素高度固定
本文一開始就提到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，結合display: table;，可以使得div模擬table屬性。因此我們可以設定父級div的display屬性：display: table;；然後再新增乙個div包含文字內容，設定其display:table-cell;和vertical-align:middle;。具體**如下：
xml/html code複製內容到剪貼簿
但是，在ie7中顯示效果如下：
這是因為ie7及以下的版本並不能很好的支援display:table和display:table-cell屬性，當然，如果你不考慮ie7以下的版本的瀏覽器，上述方法是可以實現垂直居中。如果把ie7及以下版本考慮進去，我們可以通過用到css hack的知識來設定針對不同瀏覽器的屬性。
xml/html code複製內容到剪貼簿
trlhd
子div垂直居中
1、根據子div具體大小設定偏移
如果子div固定大小，設定水平和垂直偏移父元素的50%，再根據實際長度將子元素向上和向左挪回一半大小
xml/html code複製內容到剪貼簿
該方法相容ie7、ie6，但是只針對子div大小的固定的情況下才有效。大部分時候，子div的大小是不固定的，下面介紹子div大小不固定時的方法。由於顯示效果與這個效果基本一樣，效果圖就不一一貼出來，讀者可以自行複製**驗證。
2、利用translate
針對第一種方法中水平和垂直偏移父元素的50%後，不設定margin值，而是利用除css3中的transform屬性設定translate的值，css**部分改成如下：
css code複製內容到剪貼簿
這種方法需要注意transform是css3中的屬性，使用時注意瀏覽器的相容性，ie9之前的版本不支援。
3、利用絕對布局absolute
xml/html code複製內容到剪貼簿
該方法不相容ie7、ie6
4、利用vertical-align
xml/html code複製內容到剪貼簿
這種方法是將div轉變成table-cell顯示，然後通過vertical-align: middle;再設定其子元素垂直居中，這種方法和上面設定父級元素高度固定時多行文字居中的方法一樣，所以這種方法也不能相容ie7、ie6。如果需要相容ie7、ie6，可以參照上面的**，上面設定父級元素高度固定時多行文字居中的方法其實就是將最裡面的div垂直居中。這裡我就不重述了。
5、利用display: flex
xml/html code複製內容到剪貼簿
這種方法只需要在父級div中加上這三句話就行，但是在ie中相容性不好，ie9及以下ie瀏覽器版本都不支援。
以上是我總結的一些常用到的垂直居中的設計方法，大家可以根據自己的需要選擇合適的設計方式。
原文鏈結：
本文標題: css文字和div垂直居中方法總結
本文位址: /web/css/84830.html
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：css垂直居中 多行文字垂直居中 單行文字垂直居中 div垂直居中
使用css的table-cell屬性實現左圖右文的排版方法詳解css過渡+3d效果的簡單實現
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
© 2018-2021 程式設計客棧 贛icp備17006162號-9
贛公網安備 36110202000251號
top
css 文字和div垂直居中方法彙總
id div1 這是單行文字垂直居中 div css div1 id div1 這是多行文字垂直居中，這是多行文字垂直居中，這是多行文字垂直居中，這是多行文字垂直居中。div css div1 id outer id middle 這是固定高度多行文字垂直居中，這是固定高度多行文字垂直居中，這是固定...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
div水平垂直居中方法總匯
方法一 絕對定位方法 不確定當前div的寬度和高度，採用transform translate 50 50 當前div的父級新增相對定位 position relative children方法二 絕對定位方法 確定當前div寬度和高度嗎，margin值為當前div寬度一半的負值。children方...