position 居中问题详解

<!--  position 居中问题详解

Type:笔记

Date: 2015/12/23

前几天看过这个问题, 昨天在写完一个留言添加居中后, 就把怎么计算的给忘了, 今天经过师傅级指点,又会了, 于是就有了本篇笔记。


-->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
  <style type="text/css">
    body
    {
        background:blue;
    }
    #main
    {
        width:200px;
        height:200px;
        background:red;
    }

  </style>
</head>
    <body>
         <div id="main">
         </div>
    </body>
</html>

<!--   part1  在body体里新建了一个div,给div的宽和高各200像素  -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
  <style type="text/css">
    body
    {
        background:blue;
        margin:0px;padding:0px;
    }
    #main
    {
            width:200px;
        height:200px;
        background:red;
    }

  </style>
</head>
    <body>
         <div id="main">
         </div>
    </body>
</html>

<!-- part2 把外边距到div外边框和内容到div内边框的距离全部清空,清空后,内容全部在左上角的位置,因为是左上角,所以夹角就是上和左  -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
  <style type="text/css">
    body
    {
        background:blue;
        margin:0px;padding:0px;
    }
    #main
    {
        width:200px;
        height:200px;
        background:red;
        position:absolute;
        top:50%;
        left:50%;
    }

  </style>
</head>
    <body>
         <div id="main">
         </div>
    </body>
</html>

<!--   part3 因为main的父级没有设置position,所以top left是绝对于浏览器,从左上角开始,上和左各占50%,这个时候,div的左上顶点就在body的中心位置  -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
  <style type="text/css">
    body
    {
        background:blue;
        margin:0px;padding:0px;
    }
    #main
    {
        width:200px;
        height:200px;
        background:red;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-100px;
        margin-left:-100px;
    }

  </style>
</head>
    <body>
         <div id="main">
         </div>
    </body>
</html>

<!--  part4 我们前面知道了, 中心点在div的左上角, 又知道了, div的长和高各占200像素, 于是这个时候,div上移100像素中心点就到了height 100像素的位置, 再左移100像素,中心点就变成了width 100像素的位置, 到此, position居中完毕。   -->
此条目发表在div/css分类目录,贴了, , , , 标签。将固定链接加入收藏夹。