CSS的水平垂直居中方案整理

前言

　　在CSS中，设置元素的水平和垂直居中是最常用的，但是由于需求的多样性，针对不同情况会有不同的处理方案，因此，总结了一下关于这类问题的解决方案

行内元素的水平居中

　　要实现行内元素（<span>、<a>）的水平居中，只需要将行内元素包裹在块级父元素（display:block）中并且在父级元素设置CSS:

    #container{
        text-align:center;
    }

　　这种方法适用于display属性为inline、inline-block、inline-table、inline-flex

块级元素的水平居中

　　要实现块级元素(display:block)的水平居中，只需要将其CSS属性设置为：

    #center{
        margin:0 auto;
    }

多个块级元素的水平居中

【1】传统方式：

　　设置水平排列的块级元素的display:inline-block，设置其父元素的text-align:center，达到与上面的额行内元素相同的效果

    #container{
        text-align:center;
    }
    .center{
        display:inline-block;
    }

【2】使用flexbox实现

　　使用之前，首先简单介绍flexbox。

　　Flexbox布局是CSS3中一种新的布局方式，它能够提供一个更有效的方式制定、调整和分布一个容器内的项目布局，即使它们的大小是未知或动态的。

使用flex

    #container{
        display:flex;
    }

　　flex默认是一个块级元素，如果需要定义一个行内级元素，只需要display:inline-flex;

　　flexbox由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex能得到一个伸缩容器，伸缩容器的内部元素会变成伸缩项目

　　回到正题，要利用flex实现多块级元素的水平居中，只需要将父级元素CSS设置为：

    #container{
        justify-content:center;
        display:flex;
    }

已知高度宽度元素的水平居中

【1】使用绝对定位和负边距实现

　　使用绝对定位，将元素的top、left设置为50%，再利用margin，将元素拉回本身宽高的一般，实现水平垂直居中

    #container{
        position:relative;
    }
    #center{
        100px;
        height:100px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
    }

【2】绝对定位和margin

　　这种方法无需知道被垂直居中的元素的宽和高

    #container{
        position:relative;
    }
    #center{
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }

未知高度和宽度的元素的水平垂直居中

【1】当要垂直居中的元素时inline或inline-block时，可以将其父元素设置为display:table-cell，配合text-align:center和vertical-align:middle就能实现水平垂直居中

    #container{
        display:table-cell;
        text-align:center;
        vertical-align:middle;
    }

【2】CSS3中的transform属性

    #container{
        position:relative;
    }
    #center{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }

flex布局实现

    #container{
        display:flex;
        justify-content:center;
        align-item:center;
    }