關於垂直居中

做專案每次垂直居中的時候都折騰半天，在這邊稍微整理一下垂直居中我所理解的一點知識吧。

1，行內元素

行內元素，比如，img，span等直接用vertical-align:middle，就可以搞定了。

2，塊元素

垂直居中，最簡單的方式是height：20px;line-height:20px;讓他們相等，塊元素就可以達到居中效果並且不破壞周圍的布局。

還可以用絕對定位來布局，height:100px;position：absolute；top:50%；margin-top:-50px;也可以達到居中效果，但是必須是高度確定的情形下才可以用。

同理，也可以用同樣的辦法實現水平居中。

優點：適用於所有瀏覽器,不需要巢狀標籤

缺點：

沒有足夠空間時，content 會消失(類似div 在 body 內，當使用者縮小瀏覽器視窗，滾動條不出現的情況)

3，乙個裡包了乙個img,乙個span的話怎麼居中

今天看部落格偶然看到的法子，較深的講解了vertica-align 屬性

所有的行內元素都是基線對齊的麼，照道理來說不管是普通的行內元素還是替換元素都是對齊父元素的基線baseline，但是他們自身的行高和高都影響他們的布局。對於格式化的內聯元素使用了display:inline-bolck

使得乙個內聯元素表現得像乙個塊級元素的屬性且又有行內元素的屬性（不換行，標籤末尾不帶br強行換行符），因此行內塊級元素的的文字依然是跟我們常見的div標籤的文字都是從左上角往右下角依次書寫，對於其增加的高度也是從上往下頂：

所以假如給乙個元素增加高度是其實單從我們所直**見的是內容區的外邊界開始往下遞增。所以也不會奇怪，當在乙個元素內插入一張影象，改變行內元素變成行內塊級元素，並賦予它與父框等同高度時，它會變得不對齊。其實他們是正確的顯示效果，並不是因為display而改變垂直對齊基線。而我們可以通過利用vertical-algin改變他們兩個相對父框垂直位置。

通過在span 設定成diplay:inline-block;設定line-height：80px;會在他的baseline顯示的位置以80px;高度往下顯示撐起整個div。

通過設定vertical:align就達到垂直居中的效果啦~~~

4.這個方法把一些 div 的顯示方式設定為**，因此我們可以使用**的 vertical-align property 屬性。

#cell

優點：缺點：

internet explorer(甚至 ie8 beta)中無效，許多巢狀標籤(其實沒那麼糟糕，另乙個專題)

5, 這種方法，在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動，並顯示在中間。

content here

#floater

#content

優點：適用於所有瀏覽器

沒有足夠空間時(例如：視窗縮小) content 不會被截斷，滾動條出現

缺點：

唯一我能想到的就是需要額外的空元素了(也沒那麼糟，又是另外乙個話題)

6.這個方法使用了乙個 position:absolute，有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。

content here

#content

優點：簡單

缺點：ie(ie8 beta)中無效,無足夠空間時，content 被截斷，但是不會有滾動條出現

引自：

關於垂直居中

關於垂直居中

關於DIV垂直居中

關於文字垂直居中

關於垂直居中

關於垂直居中

關於DIV垂直居中

關於文字垂直居中

相關推薦