task0001第六部分之水平居中问题

最新推荐文章于 2022-07-11 07:35:00 发布

zhuyi_77

最新推荐文章于 2022-07-11 07:35:00 发布

阅读量448

点赞数

分类专栏： IFE笔记文章标签：水平居中 css水平居中绝对定位水平居中

本文链接：https://blog.csdn.net/u014106213/article/details/52652412

版权

IFE笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用两种方法来实现一个背景色为红色、宽度为960px的div在浏览器中居中

1）首先来分析一下居中，如果一个固定宽度的div的最左最右两端到浏览器窗口的距离是相同的，那么这样这个div相对于浏览器是水平居中的。 题目由于给定了宽度，使用margin:0 auto;两边的距离自适应，就可以让这个div水平居中了

    <style>
      .box{
           width: 960px;
           height: 100px;
           background-color: red;
           margin: 0 auto;
    }
    </style>

    <body>
        <div class="box"></div>
    </body>

使用margin在浏览器中的效果图

2）利用text-align：center；给要居中的div加一个包裹层，然后对这个包裹层设置text-align：center。和IFC原理有关，待了解。
但是这样设置包裹层里的行内元素才会实现居中的效果，由于div宽度设定为960px，
所以给div加上display:inline-block;
但是这个方法加深了嵌套，使用了额外标签。

    <style>
          body{
               margin: 0;
           }
           .wrap{
               text-align: center;
           }
           .box{
               width: 960px;
               height: 100px;
               background-color: red;
               display: inline-block;
           }
    </style>

    <body>
       <div class="wrap">
            <div class="box"></div>
        </div>
    </body>

3)利用绝对定位来实现
水平居中也可以说是div的竖直的对称轴和浏览器窗口的竖直的对称轴完全重合。那么只要想办法把这两个对称轴重合就可以实现了。
首先给这个div加上绝对定位

   <style>
        body{
            margin: 0;
        }
        .box{
            position: absolute;
            width: 960px;
            height: 100px;
            background-color: red;
        }
    </style>

只对图片设置了绝对定位和宽高的时候

然后对这个div设置left:50%，这样这个div会移动半个浏览器窗口。也就是说这个div的最左边的边从开始的位置（窗口最左边）移动到浏览器窗口的中间。

  .box{
            position: absolute;
            left:50%;
            width: 960px;
            height: 100px;
            background-color: red;
        }

div的最左端对齐窗口的中间

而我们的目标是这个div的对称轴和浏览器窗口的对称轴对齐。那么，此时只要将div的最左端移动div的宽度的一半，那么就能实现了。可以使用负边距来移动这个div的一半。

 .box{
            position: absolute;
            left:50%;
            margin-left: -480px;
            width: 960px;
            height: 100px;
            background-color: red;
        }

绝对定位实现居中

这个方法除了用绝对定位脱离文档流之外，在把浏览器窗口缩小到一定小时还会产生一点小问题。因为这个方法margin-left值设置为负边距，而其他方法下缩小窗口margin值最小是0。

窗口比较大的时候三种方法下居中的div

图片是三种方法对比，为了把文字都左对齐看出区别，给外层使用text-align方法的div加上text-align:left

http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
这篇文章中讲解负边距，最后提到了对绝对定位的影响…..我还不是很明白….待研究

这几种方法在不定宽度的div上的区别

第一种margin值的方法，需要明确宽度。那么不定宽度就没办法生效了。

第二种外层text-align:center；内层display：inline-block。这种方法可以在没有宽度和高度的情况下实现，内层的宽和高随内容变化。

 .box2{
            display: inline-block;
            text-align: left;
            /*width: 960px;*/
            /*height: 100px;*/
            background-color: #fff458;
        }

第三种
在不知道div的宽度的情况下，和上面定宽最大区别的一步就是要让div的一半向左移动。

CSS3中有transform变换，这样可以实现移动的功能

 .box1{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            -ms-transform: translateX(-50%);    /* IE 9 */
            -moz-transform: translateX(-50%);   /* Firefox */
            -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
            -o-transform: translateX(-50%);     /* Opera */
            height:100px;
            background-color: #79ff5a;
        }

如果不用css3中这个属性……
那就这样：
第一步：给div加一个包裹层。然后来看效果发现这个div是块状元素，占了一行。这时候就自然想到给这个包裹层加上display:inline-block，或者用浮动的方法，其实就是为了让这个包裹层的宽度自适应它里面的内容。
浮动或者设为内联元素后
第二步：这样之后，就和定宽的居中方法类似，首先把元素最左端移动到浏览器窗口对称轴。给包裹层加上position: relative;和left: 50%;
以上两步用绝对定位也是一样的效果，….上面这两步中的给包裹层设置浮动或者改变display再设置为相对定位都可以直接设置它为绝对定位。设置了绝对定位后元素宽度自适应，再有是包裹层相对父元素也就是body向左移动一半的距离，效果是一样的。

![加了相对定位后](https://img-blog.csdn.net/20160924175046876)

第三步：最后把div往左移动它的一半就可以居中了，给div加上position:relative; left:-50%;这个就是相对自己最开始那个位置来左移嘛…..这个要是用绝对定位的话….父元素就变成了一个点了，因为脱离了文档流。

 <style>
        body{
            margin: 0;
        }
        .box1{
            position: relative;
            left: -50%;
            background-color: #79ff5a;
        }
        .wrap2{
            position: relative;
            display: inline-block;/*也可以改为float：left;*/
            left: 50%;
            border: 1px solid aquamarine;
        }
    </style>
<body>
    <div class="wrap2">
        <div class="box1">positionpositionpositionposition</div>
    </div>
</body>