CSS水平和垂直居中方式

CSS水平和垂直居中方式

1.水平居中

1.1 行内元素的水平居中

/*行内元素水平居中*/
    #div{
        text-align:center;
    }

1.2 块级元素的水平居中

/*块级元素水平居中*/
    #div{
        margin:0 auto;
    }

1.3多个块级元素水

/*多个块级元素水平居中*/
    #div-out{
        text-align:center;
    }
    #div-in{
        display:inline-block;
    }

2.水平垂直居中

2.1 已知宽度高度的垂直水平居中

/*已知高度和宽度的水平垂直居中*/
        #div-out{
            position:relative;
        }
        #div-in{
            width:100px;
            height:100px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-50px 0 0 -50px;
        }

2.2 未知宽度高度的垂直水平居中

/*未知高度和宽度的水平垂直居中*/
        #div-out{
            position:relative;
        }
        #div-in{
            position:absolute;
            margin:auto;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }

2.3 当被居中的元素是inline或者是inline-block

        #div-out{
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
        #div-in{

        }