自创文字垂直水平居中

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css"> 
html{overflow:auto;}
html,body,p{margin:0;padding:0; }
body{ font-size:74%;text-align:center;}
#wrap
{
text-align:left;
width:700px;
margin:0 auto;
padding:0;
height:300px;
background:silver;
border:1px solid black;

/*去掉则显示高度在IE8下有问题,测试可能是空白边叠加造成的问题,边界重合可以用border或padding来避免*/
}
p{
position:relative;
left:50%;
top:50%;
text-indent:2em;
margin-top:-50px;
margin-left:-120px;
height:100px;
width:240px;
background:black;
color:white;
overflow:hidden;
padding:5px;
line-height:140%;
}
</style>
<body>
<div id="wrap">
  <p>
文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示文字居中显示
  </p>
</div>
</body>
</html>

posted @ 2009-11-04 13:42  ._  阅读(351)  评论(0编辑  收藏  举报