三种常见的块居中方式

非强制要求,全凭项目要求或者个人喜好, 一般用在比如用户注册页面模块,后台登录模块,新闻栏模块等等。

正常方式一,使用position固定居中

<html>
<head>
<title>position</title>
<style type="text/css">
body
{
    background:blue;
    margin:0px;
}
#main
{
        width:300px;
    height:300px;
        background:yellow;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-150px;
}
</style>
</head>
<body>
    <div id="main">
    </div>
</body>
</html>

给了div宽高各300, 使用了position后, 就脱离了文档流, 然后给高和左距各占50%;因为是position,所以是左上角的夹角,此时top间距和left间距各为150, 所以这个时候, 把div外border到body外边距回退150同时把left也回退150,就做出了一个居中的效果,此时的居中不会随浏览器的最大化和最小化改变位置,是一个始终居中的状态。

(上右下左,缺省的对边相等,咱们这里就等于是,把上和左都回退到了150像素,所以对应下和右也是150像素。)

正常方式二, padding居中效果

<html>
<head>
<title>padding</title>
<style type="text/css">
body
{
    background:green;
    padding:50%;
}
#main
{
    width:200px;
    height:200px;
    background:yellow;
}
</style>
</head>
<body>
    <div id="main">

    </div>
</body>
</html>

内bodypadding了50%, 就会往内挤压, 上左下右各占50%, 也是一种居中效果, 缺点就是会导致内部div变形。

下面展示2种错误的用法

<html>
<head>
<title>错误的用法</title>
<style type="text/css">
body
{
    background:red;
    margin:0px;
}
#main
{
    width:200px;
    height:200px;
    background:green;
    position:absolute;
    margin-top:50%;
    margin-right:50%;
    margin-bottom:50%;
    margin-left:50%;
}
</style>
</head>
<body>
    <div id="main">
    </div>
</body>
</html>
<html>
    <head>
        <style type="text/css">
            body
                {
                     background:red;
                     margin:0px;
                }
            #main
            {
                width:100%;
                height:100%;
                background:green;
                margin-top:50%;
                margin-left:50%;
                margin-bottom:50%;
                margin-right:50%;

            }
        </style>
    </head>
  <body>
     <div id="main">
     </div>
  </body>
</html>
此条目发表在div/css分类目录,贴了, , 标签。将固定链接加入收藏夹。