页面架构（笔记1）——水平居中布局

需求要求：

1.子容器相对父容器水平居中

2，子容器与父容器的自身宽度都是自适应的

image

image 

image 

 

解决方案一（inline-block+text-align）

<style type="text/css">
    body{margin:20px;}
    
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;
    }
</style>

<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
要点:
display: inline-block; 特点：宽度根据内容来，
text-align: center 特点：对inline元素起作用
方案一优点：兼容性好，
缺点： 1.因为父元素上设置了text-align:center,所以子元素会继承过来，导致子元素的文字和容器一起居中，解决办法：增加.child{text-align:left;}
2.Ie6.7不兼容inline-block,需要加上display:inline; zoom:1；来兼容
 

解决方案二（table+margin）

<style type="text/css">
    body{margin:20px;}

    .child{
        display: table;
        margin: 0 auto;
    }
</style>

<div class="parent">
    <div class="child">DEMO</div>
</div>

 

要点:
display: table; 特点：table类似block元素,并且宽度也是根据内容走.
方案二优点：只需要设置.child的样式，不用去考虑parent上的样式，支持Ie8+
缺点：Ie6,7不支持display：table，我们可以吧html部分的结构换成table的结构，就可以兼容到了。

 

解决方案三（absolute+transform）

<style type="text/css">
    body{margin:20px;}
    
    .parent{height:1.5em;}
    .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);<!--左移自身宽度的一半-->
    }
</style>
</head>
<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
要点:
 position: absolute特点：宽度也是根据内容走 
方案二优点：absolute脱离文档流，不会对其他元素产生影响，
缺点：transform:不支持Ie6,7，8，兼容性达不到要求

 

解决方案四（flex+justify-content）

<style type="text/css">
    body{margin:20px;}

    .parent{
        display: flex;
        justify-content: center;
    }
<!--如果不用justify-content，可以在子元素上设置-->
    .child{
        margin: 0 auto;
    }
</style>

<body>
<div class="parent">
    <div class="child">DEMO</div>
</div>
</body>
要点:
在.parent设置display: flex; ，它的子元素.child就成为了flex item,默认情况为宽度为auto， 
方案二优点：只需要设置parent节点就可以了，child不需要去设置
缺点：flex不支持Ie6,7，8，兼容性达不到要求

posted on 2016-02-18 21:17  zz_zjy  阅读(169)  评论(0)  编辑  收藏  举报

导航