兼容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; i<children.length; i++){
                var child = children[i];
                var classNames = child.className.split(' ');
                for (var j=0; j<classNames.length; j++){
                    if (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的值（記得添加定位屬性）：

<!--[if lt IE 10]>
    <script>
        var parent = document.getElementById("parent");
        var flexb = document.getElementById("flexb");
        parent.style.position='relative';
        flexb.style.position='absolute';
        flexb.style.top=(parent.offsetHeight-flexb.offsetHeight)/2+"px";
        flexb.style.left=(parent.offsetWidth-flexb.offsetWidth)/2+"px";

        </script>
<![endif]-->

ps:測試時發現使用flexbox和用絕對定位（計算的不夠精確），小方塊的位置有細微移動，但是視覺上都是居中。