CSS實現不定高內部元素的垂直居中

最近看一篇英文文章，大致內容如下（小女英語欠佳，若有理解欠妥之處忘各位高手指正）：

儘管css有垂直屬性，但是它不像html中table標籤的垂直性一樣有效。css的垂直屬性似乎也不能解決這個問題：

問題的定義：

1、  乙個在頁面中已知高的區域（如div）。

2、  乙個內部元素（代表在div中的一段長文字）在乙個未知高的區域內部（如：它們內容的資料是動態變化的）。

3、  要求它垂直居中在區域中。

4、  不用table**。

構想

ie中的主要解決方案：內部的區域元素絕對定位於外部區域元素高的一半。然後它到移到它高的一半位置。在ie中高屬性的錯誤解析需要用乙個額外的巢狀div屬性來解決。

解決像browsers like mozilla, opera, safari等一些標準的瀏覽器垂直居中的方法又完全不同。將整個頂部的div區域的顯示模式設為** (display:table)，內部的物件視為**單元格（display:table-cell），而且這裡有個小技巧：需要為這個顯示元素設定垂直居中屬性。

將這再種語法合併，我沒有用下劃線hack，而是用了#標記，用下劃線寫的css屬效能被除開ie7外的所有之前的版本所識別，用#寫的css屬效能被所有ie瀏覽器識別(包括ie7)，這兩種寫法都不其它標準瀏覽器所識別。而下劃線hack對本例項實現瀏覽器相容似乎也行不能。如果你不想用#標記的方法（建議在css中最好不用css hack），你可以用下面介紹的方法：

**

1

doctype html public "-//w3c//dtd html 4.01//en"
>23
<
html
>
4<
head
>
5<
title
>
vertical centering in valid css
title
>613
<
style 
type
="text/css"
>
14.greenborder 
15#outer
16#middle
17style
>
18head
>
1920
<
body
>
21<
h1>
vertical centering in valid css - example
h1>
22<
div 
id="outer"
class
="greenborder"
>
23<
div 
id="middle"
>
24<
div 
id="inner"
class
="greenborder"
>
25any text
<
br>
26<
b>
any height
b><
br>
27any content, for example generated from db
<
br>
28everything is vertically centered
<
br>
29div
>
30div
>
31div
>
32body
>
33

實現垂直和水平居中

核心**基本是相同的，只需要加幾條css即可。即標準頁面**為：

<

style
>
#outer 
#inner 
style
>

如果你使用怪異模式（或相容模式 見註1）來表現頁面（我們都知道頁面依賴於文件型別），你需要多加一點點**，因為怪異模式的ie不支援margin auto,但是有乙個好的bug 能替代它：text-align:center,下面這段**在怪異模式和標準模式下都能有效：

<

style
>
#outer 
#middle 
#inner 
style
>

ie6.0以後的版本在瀏覽器內嵌了兩種表現模式：standards mode（標準模式或strict mode）和quirks mode（怪異模式或相容模式compatibility mode）。在標準模式中，瀏覽器根據w3c所定的規範來顯示頁面；而在怪異模式中，頁面將以ie5，甚至ie4的顯示頁面的方式來表現，以保持以前的網 頁能正常顯示。

對於這兩種模式引起最大的問題就是盒模式的問題，或者現在大家已經忽視了ie5的存在，但是，ie在怪異模式執行的盒模式依然在最新版本的ie7保留著，一旦應用不得當，ie7將變成跟ie5一樣愚蠢。

css實現不定寬高的div水平 垂直居中

一共有三個方案 1，第一種方案主要使用了css3中transform進行元素偏移，效果非常好 這方法功能很強大，也比較靈活，不僅僅侷限在實現居中顯示。相容方面也一樣拿ie來做比較，第二種方法ie8以上都能使用。ie8及ie8以下都會出現問題。body div id box div id conten...

CSS 水平垂直居中的4種實現（寬高不定）

方案中我也給了寬高,但並不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之後,如果你父元素 子元素的寬高發生了改變,依舊可以保證是水平垂直居中的位置。下面四種方案都是能夠實現,當父元素或子元素的寬高發生改變時,依舊維持水平垂直居中布局的方案。html css fa...

CSS實現元素垂直居中

對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...