div块在屏幕上左右居中并且垂直居中

面试题中有一个这样的问题,如何将一个DIV块在屏幕上左右居中并且垂直居中?
效果如下图:
【CSS布局】div块在屏幕上左右居中并且垂直居中!

制作原理: 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

1、样式如下:
<style type="text/css">
.main{
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:100px;
    margin-top:-50px;
    margin-left:-100px;

    border:1px solid red;
    line-height:30px;
    font-size:16px;
    text-align:center;
    }
</style>

2、html结构如下:
<div class="main">王锋老师博客:http://blog.sina.com/wangfengteacher</div>

来自王锋老师的博客: http://blog.sina.com.cn/wangfengteacher
如果想学习,请在博客首页对我进行---" 关注我 "


posted on 2011-01-07 23:32  senly  阅读(20632)  评论(0编辑  收藏  举报

导航