<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> div中的内容垂直居中实例 </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> div.demo{width: 240px;margin: 12px auto;border: 1px solid #1987df;color: inherit;background: #CEE7FF} div#outerbox{height: 70px;position: relative;display:table} div#outerbox div{position: absolute;top: 50%;left: 0} div#outerbox p{position: relative;top: -50%;margin: 4px;text-indent: 0; font-size:14px;} div#outerbox>div{display:table-cell;vertical-align:middle;position:static} </style> </head> <body> <div class="demo" id="outerbox"> <div> <p> 对于div中文字可以使其垂直居中,我要兼容IE和firefox! </p> </div> </div> </body> </html>
时间: 2024-10-26 21:54:02