CSS完美實(shí)現(xiàn)垂直居中的方法及優(yōu)缺點(diǎn)
本文和大家重點(diǎn)討論一下CSS實(shí)現(xiàn)***垂直居中的方法和優(yōu)缺點(diǎn)，在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，另外凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。
CSS實(shí)現(xiàn)***垂直居中
在CSS中要垂直居中，多數(shù)是在有高度的情況下，或者容器高度不定的情況下才用，看上去比較舒服，而且實(shí)現(xiàn)的方法也不少，不一定要拘泥于和table布局一樣。不過最近有人問了幾個(gè)例子，看來對(duì)此的需求還不少。
首先，要有一個(gè)概念：凡是table布局可以實(shí)現(xiàn)的，CSS一定可以實(shí)現(xiàn)。CSS可以實(shí)現(xiàn)的，table未必能做到。
現(xiàn)在來幾個(gè)例子：
單行內(nèi)容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置line-height和height，并使兩值相等，再加上over-flow:hidden就可以了。
viewplaincopytoclipboardprint?
- .middle-demo-1{
- height:4em;
- line-height:4em;
- overflow:hidden;
- }
- .middle-demo-1{
- height:4em;
- line-height:4em;
- overflow:hidden;
- }
優(yōu)點(diǎn)：
1.同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2.支持所有瀏覽器
缺點(diǎn)：
1.只能顯示一行
2.IE中不支持等的居中
要注意的是：1.使用相對(duì)高度定義你的height和line-height2.不想毀了你的布局的話，overflow:hidden一定要。
為什么？請比較以下兩個(gè)例子：
viewplaincopytoclipboardprint?
- <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,
- Arial,sans-serif;height:24px;width:370px;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
- <br/>
- <br/>
- <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,
- Arial,sans-serif;height:2em;width:370px;overflow:hidden;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
- <pstylepstyle="background:#900;color:#00f;font:bold12px/24pxHelvertica,
- Arial,sans-serif;height:24px;width:370px;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
- <br/>
- <br/>
- <pstylepstyle="background:#090;color:#00f;font:bold12px/2emHelvertica,Arial,
- sans-serif;height:2em;width:370px;overflow:hidden;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.p>
上一個(gè)高度是用的絕對(duì)單位px，并且沒有隱藏溢出，下一個(gè)高度用的單位是相對(duì)單位em，并且隱藏了溢出。如果你的瀏覽器支持放大字體，那么盡情地放大字體，看看會(huì)出現(xiàn)什么效果。#p#
多行內(nèi)容居中，且容器高度可變
也很簡單，給出一致的padding-bottom和padding-top就行
viewplaincopytoclipboardprint?
- .middle-demo-2{
- padding-top:24px;
- padding-bottom:24px;
- }
- .middle-demo-2{
- padding-top:24px;
- padding-bottom:24px;
- }
優(yōu)點(diǎn)：
1.同時(shí)支持塊級(jí)和內(nèi)聯(lián)極元素
2.支持非文本內(nèi)容
3.支持所有瀏覽器
缺點(diǎn)：容器不能固定高度
把容器當(dāng)作表格單元
CSS提供一系列diplay屬性值，包括display:table,display:table-row,display:table-cell等，能把元素當(dāng)作表格單元來顯示。這是再加上vertical-align:middle,就和表格中的valign="center"一樣了。
viewplaincopytoclipboardprint?
- .middle-demo-3{
- display:table-cell;
- height:300px;
- vertical-align:middle;
- }
- .middle-demo-3{
- display:table-cell;
- height:300px;
- vertical-align:middle;
- }
可惜IE不支持這些屬性，不過在其他瀏覽器上顯示效果非常***。要注意的是：和一個(gè)合法的
