CSS实现居中的方式

CSS实现居中的方式

标签（空格分隔）： CSS 居中

---

水平居中的几种方式

• inline-block & text-align

    HTML：

        <div id="container">
            <div class="parent">
              <div class="child" style="background:#eee">DEMO</div>
            </div>
        </div>

    CSS:

        /*inline-block+text-align */
        /* 优点:兼容性非常好,inline-block在IE8以下可以用inline+zoom:1来进行兼容
        缺点:child会继承text-align:center,需要对子孙元素进行reset */

        .parent{
          text-align:center;
        }
        .child{
          display:inline-block;  /*宽度变为内容宽度*/
        }

• table & margin

    CSS:

        /*table+margin */
        /* 优点:只需要设置child,IE6 7 child可以采用table的方式 如th                 tr来实现 */

         .child{
                display:table;   /*table元素宽度变为内容宽度*/
                margin:0 auto;
        } 

• absolute & transform

        /* absolute+transform */
        /* 优点:子元素设置了absolute不会对其他元素参数影响
           缺点:应用了CSS3的属性，导致兼容性比较差. */

        .parent{
            position:relative;
        }
        .child{
            position:absolute;
            left:50%;
            transform:translateX(-50%)
        /* 参照物为自身宽度的50%，类似于margin-left:-50%px,但是后者需要知道元素的大小*/
        } 

• flex & justify-content

        /*flex+justify-content */
        /* 优点:非常强大的flex布局
           缺点:不兼容IE10以下- -安卓上支持也不是特别完善 */

        .parent{
          display:flex;/* 宽度为内容宽度 */
         /*  justify-content:center; */
        }
        /* 如果不用justify-content那么可以用child */
        .child{
            margin:0 auto;
        }

---

垂直居中的几种方式

• table-cell & vertical-align

    HTML：

        <div id="container">
            <div class="parent" style="height:300px; background:#eee">
                <div class="child">DEMO</div>
            </div>
        </div>

    CSS:

        /* table-cell+vertical-align */
        /* 优点:兼容IE8以上,兼容低版本只需要把HTML结构换成table结构 */

        .parent{
            display:table-cell;
            vertical-align:middle;      /* 作用在Inline,table-cell,inline-block元素上*/
        }
         */

• absolute & transform

        /*absolute+transform */
        /* 优点:子元素不会对其他元素造成干扰,
           缺点:兼容性差 */

        .parent{
            position:relative;
        }
        .child{
            position:absolute;
            top:50%; 子容器上边对齐父元素中部
            transform:translateY(-50%);
        }

• flex & align-items

        /* flex+align-items */
        /* 优点:flex布局
           缺点:兼容性是个问题 */

        .parent{
            display:flex; /* 高度撑满整个容器 */
            align-items:center /* 垂直居中 */
        }

---

实现水平垂直居中的几种方式

• inline-block & text-align & table-cell & vertical-align

    HTML:

        <div id="container">
            <div class="parent" style="height:300px;background:#eee">
                <div class="child" style="background:#ee2;">DEMO</div>
            </div>
        </div>

    CSS:

        /* inline-block+text-align+table-cell+vertical-align */
        /* 优点:兼容性比较高,对于低版本HTML结构采用table结构即可 */

        .parent{
            text-align:center;
            display:table-cell;
            vertical-align:middle;
        }
        .child{
            diaplay:inline-block;
        } 

• absolute & transform

        /* absolute+transform */
        /* 优点:子元素不会干扰其他元素
           缺点：兼容性较差 */
        .parent{
            position:relative;
        }
        .child{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50% -50%);
        } 

• flex+justify-content & align-items

        /* flex+justify-content & align-items */
        /* 优点:flex布局;
            缺点:兼容性不太好 */

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