css 實現(xiàn)文字垂直居中

2024-07-11 08:38:56

字體：大中小

供稿：網(wǎng)友

分兩種情況：
fix height：
即垂直居中的元素高度已知，這個比較簡單，也不需要額外的輔助元素。

<!DOCTYPE HTML> <html> <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”cache-control” content=”no-cache” /> <style> <!– html, body { height: 100%; margin: 0; padding: 0; } body { position: relative; } #div { background: blue; color: #fff; position: absolute; top: 50%; left: 50%; height: 240px; width: 240px; margin: -120px 0 0 -120px; } –></style> </head> <body> <div id=”div”> i’m Mr. Middle. </div> </body> </html> 
提示：您可以先修改部分代碼再運行
variable height：
居中元素高度可變，這個需要額外的一個wrapper元素，用table-cell的方式來模擬表格的居中實現(xiàn)，當然，早期的ie又是另一招，具體可見代碼。

<!DOCTYPE HTML> <html> <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”cache-control” content=”no-cache” /> <style> <!– html, body { height: 100%; margin: 0 auto; padding: 0; } body { position: relative; display: table; } #wrapper { display: table-cell; vertical-align: middle; text-align: middle; } #div { background: blue; color: #fff; } * html #wrapper, *+html #wrapper { position: absolute; top: 50%; } * html #div, *+html #div { position: relative; top: -50%; } –></style> </head> <body> <div id=”wrapper”> <div id=”div”> i’m Mr. Middle. i’m Mr. Middle. i’m Mr. Middle. </div> </div> </body> </html> 
提示：您可以先修改部分代碼再運行

上一篇：多個瀏覽器透明度設(shè)置

下一篇：IE和FF在對js支持的不同(整理)及解決方法