居中布局之水平垂直布局

命题：如下不定宽高的父元素与子元素

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

问题一：使子元素水平居中

       方案1：

.child{
      display:inline-block;   //ie6、7可用{display:inline;zoom:1;}进行兼容
}
.parent{
      text-align:center;
}

     优点：浏览器兼容性好

     缺点：子元素会继承文本居中特性，故如不希望子元素中文本居中，可对子元素设置{text-align:left;}

     方案2：

.child{
     display:table;          //此属性能使元素宽=内容宽，且具有block属性。
     margin:0 auto;
}

    优点：只需要对child进行设置

    缺点：不兼容ie6.7。可对结构进行改造，改成table标签

     方案3：

.parent{
     position:relative;
}
.child{
     position:absolute;
     left:50%;
     -webkit-transform:translateX(-50%);  //-webkit代表谷歌内核识别码
     -moz-transform:translateX(-50%);     //-moz代表火狐内核识别码
     -ms-transform:translateX(-50%);      //-ms代表ie内核识别码
     -o-transform:translateX(-50%);       //-o代表欧朋【opera】内核识别码
     transform:translateX(-50%);          //符合W3C标准
}

     缺点：低版本ie6、7及8不支持transform，不同浏览器也可能有兼容问题。

      方案4：

// 1
.parent{
   display:flex;
   justify-content:center;
}
// 2
.parent{
   display:flex;
}
.child{
   margin:0 auto;
}

    缺点：低版本ie6、7及8不支持flex

问题二：使子元素垂直居中

    方案1：

.parent{
      display:table-cell;
      vertical-align:middle;    //可作用于inline/inline-block/table-cell
}

    缺点：不兼容ie6.7。可对结构进行改造，改成table标签

   方案2：

.parent{
     position:relative;
}
.child{
     position:absolute;
     top:50%;
     -webkit-transform:translateY(-50%);  //-webkit代表谷歌内核识别码
     -moz-transform:translateY(-50%);     //-moz代表火狐内核识别码
     -ms-transform:translateY(-50%);      //-ms代表ie内核识别码
     -o-transform:translateY(-50%);       //-o代表欧朋【opera】内核识别码
     transform:translateY(-50%);          //符合W3C标准
}

    缺点：低版本ie6、7及8不支持transform，不同浏览器也可能有兼容问题。

   方案3：

.parent{
       display:flex;
       align-items:center;
}

    缺点：低版本ie6、7及8不支持flex

问题三：使子元素垂直水平都居中

   方案1：

.parent{
     text-align:center;
     display:table-cell;       //可把结构换成table
     vertical-align:middle;    //可作用于inline/inline-block/table-cell
}
.child{
    display:inline-block;     //ie6、7可用{display:inline;zoom:1;}进行兼容
}

   方案2：

.parent{
     position:relative;
}
.child{
     position:absolute;
     left:50%;
     top:50%;
     -webkit-transform:translate(-50%,-50%);  //-webkit代表谷歌内核识别码
     -moz-transform:translate(-50%,50%);     //-moz代表火狐内核识别码
     -ms-transform:translate(-50%,50%);      //-ms代表ie内核识别码
     -o-transform:translate(-50%,50%);       //-o代表欧朋【opera】内核识别码
     transform:translate(-50%,50%);          //符合W3C标准
}

    方案3：

.parent{
       display:flex;
       justify-content:center;
       align-items:center;
}

   缺点：兼容性较差

总结：

   在解决类似问题时，要掌握各css特性，然后把问题进行分解，最后结合特性桌布解决。还要掌握各css的兼容性