兼容IE的完全居中布局

代码详见：
https://github.com/screamingColor/save/blob/master/test/center.html

IE8下的效果：

---

本文采用绝对定位和flexbox两种方式：

第一种绝对定位方式：
先定位到父元素50%的地方再移动自身的50%

    .outb{
        position: relative;
        height: 200px;
        width: 200px;
        background-color: #E74851;

    }
    #block{

        width: 100px;
        height:100px;
        background:pink;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%); 
        -ms-transform: translate(-50%,-50%);  /* IE9及以上支持 */
        -webkit-transform: translate(-50%,-50%);    /* Safari and Chrome */
        -o-transform: translate(-50%,-50%);     /* Opera */
        -moz-transform: translate(-50%,-50%);       /* Firefox */
    }

第二种flexbox方式：
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。(支持IE10+)

推荐教程：
Flex 布局教程：语法篇- 阮一峰的网络日志
Flex 布局教程：实例篇-阮一峰的网络日志

本文实现：

#parent{
        box-sizing: border-box;
        display: flex;
        display: -webkit-flex;
        display: -ms-flex;
        height: 200px;
        width: 200px;
        border: 1px #123555 solid;
        align-items: center;        /*垂直*/
        justify-content: center;        /*水平*/
    }
    #flexb{
        width: 0px;
        border-width: 50px;
        border-style:solid;
        border-color: #123555 #E74851 #7DB1CC #ffb555;
        font-size: 0;//兼容IE7及以下
    }

---

兼容IE

首先关于IE我们要知道IE8不支持document.getElementsByClassName()，关于解决方法本文提供两种（测试有效）：
①使用API（IE7及以下不支持）

document.querySelector(".example");//返回第一个匹配的结果
document.querySelectorAll(".example");//返回所有结果

②手动添加document.getElementsByClassName()方法

if(!document.getElementsByClassName){
        document.getElementsByClassName = function(className, element){
            var children = (element || document).getElementsByTagName('*');
            var elements = new Array();
            for (var i=0; ivar child = children[i];
                var classNames = child.className.split(' ');
                for (var j=0; jif (classNames[j] == className){ 
                        elements.push(child);
                        break;
                    }
                }
            } 
            return elements;
        };
    }

---

现在我们正式来讲居中布局的IE兼容

Ⅰ.第一个方块使用的是绝对定位方式，由于IE8及以下版本不支持transform属性，所以我们需要借助IE的条件注释以及javascript来计算绝对定位top\left的值：

--[if lt IE 9]>
    <script>    
        var outb = document.querySelector('.outb');
        var block = document.getElementById('block');
        block.style.top=(outb.offsetHeight-block.offsetHeight)/2+"px";
        block.style.left=(outb.offsetWidth-block.offsetWidth)/2+"px";
    script>
<![endif]-->

Ⅱ.第二个方块采用的是flexbox,由于IE10+才支持，所以我们需要借助IE的条件注释以及javascript来计算绝对定位top\left的值（记得添加定位属性）：

ps:测试时发现使用flexbox和用绝对定位（计算的不够精确），小方块的位置有细微移动，但是视觉上都是居中。