我們使用 vertical-align:middle 來實現元素垂直居中。
。我們可以把div的顯示方式設定為**，從而使用**的vertical-alignmiddle 屬性。
width: 200px;
height: 200px;
background-color: aqua;
display: table;
}#content
分析示例
優點
缺點
這個方法使用絕對定位的div，把它的top設定為50％，margin-top設定為負的content高度。這意味著物件必須在 css 中指定固定的高度。因為有固定高度，也許你得給content指定overflow:auto，這樣如果content太多的話，就會出現滾動條，以免content溢位。
content goes here分析優點缺點這個方法的原理是利用乙個空的浮動元素來控制主要內容在容器中的位置。#content
比如我們的目標是讓紅色div位於綠色父級元素的中間，我們要讓乙個浮動元素佔據黃色的位置，然後紅色元素清除浮動，自然而然到達居中位置。
#parentcss屬性#floater
#child
content here
flex規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。效果是這樣的：
還有一種垂直居中的實現方式 ，針對移動端頁面布局的，很好用這個方法適用於單行文字的垂直居中，只需要將包含文字元素的容器行高設定為大於字型大小並且等於元素的高度。預設情況下，文字上下部分會留有相同的空間，因而實現了文字的垂直居中。#parent
text here這種方法只適用於單行文字的垂直居中，如果需要多行文字居中，需要選擇其他方法。#child
行內元素的記錄規則
字型大小要加粗，組合影象輸入框，錨準斜體的選單，強調換行上下標。
CSS實現垂直居中
1 最簡單的單行文字line height垂直居中 2 垂直居中，使用line height和vertical align middle 3 使用table布局，display table和display table cell xx 4 絕對居中，使用margin auto和top bottom l...
CSS實現垂直居中
hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才生效，例如 元素中的 等，而像 這樣的元素是沒有valign特性的，因此使用vertical align對它們不起作用。一 單行垂直居中 如果乙...
css實現垂直居中
一 單行內容的居中 設定height與line height相等，overflow hidden即可。demo height 20px line height 20px overflow hidden 注 若不使用overflow hidden，在瀏覽器頁面縮放時會出現問題。二 div垂直居中 注意...