垂直水平居中的方法

近期写项目的时候用到居中,所以总结了一下居中的方法,下面分享一下使div盒子在浏览器中垂直水平居中的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>垂直水平居中</title>

body{

margin:0;

padding:0;

}

div{

position:absolute;/*绝对定位*/

left:50%;/*距离左边50%*/

top:50%;/*距离顶边50%*/

width:200px;

height:100px;

margin:-50px 0 0 -100px;/*上面的left,top是对div左上角定位的。要中心点定位，所以margin: -高度/2 0 0 -宽度/2 就居中了*/

background:#C63;

}

</style>

</head>

<body>

<div>我永远在浏览器中央<br/>(无论浏览器窗口放大缩小)</div> </body>

</html>

效果如下:

以上是自己的工作中总结的,如有更好的方法,欢迎网友分享,大家一起学习一下.