CSS水平垂直居中实现总结

在用CSS写布局的时候，经常要用到水平居中与垂直居中。首先看下面这个div：

    这是一个例子

在body中定义了一个div，div中有一个内联元素span。下面分情况讨论如何让div和span在父容器中水平与垂直居中。

水平居中

• 块状元素
  要让上述的div水平居中非常简单，利用margin即可。将margin的水平方向设置为auto即可达到水平居中效果。

div{
        width:200px;
        margin:0 auto;
    }

• 内联元素
  对于文本、图片等内敛元素的居中，可以通过设置其块状元素的父容器中的text-align属性：

    div{
        width:200px;
        margin:0 auto;
        text-align: center;
    }

在上述div中的样式中加入text-align:center的属性，则div中的内联元素就会居中显示。

垂直居中

• 块状元素
  块状元素的垂直居中可以利用相对定位或者绝对定位，当元素设置相对定位或者绝对定位时，设置其top和left为50%，这样它的左上角就会在已定位的父容器的中间。（注：此处设置相对定位不起作用，因为50%是相对于body的高度的一半，而此时body的高度由div决定。而绝对定位在此处是相对于初始包含块的，也就是画布或者HTML元素。）
  为了让整体元素垂直居中，而不是左上角居中，可以借助margin属性，令其margin-left为负的宽度的一半，margin-top为负的高度的一半。如下：

    div{
        width:200px;
        height: 500px;
        top:50%;
        left:50%;
        position:absolute;
        margin-top:-250px;
        margin-left:-100px;
    }

这样就可以实现div的垂直居中，但是这种方法的前提是需要知道div的宽高，如果不知道的话该怎么办呢？
那就可以利用CSS3中的属性transform

    div{
        top:50%;
        left:50%;
        position:absolute;
        transform: translate(-50%,-50%);
    }

该属性可以相对于自身元素大小的50%进行移动，不用提前指定元素大小，所以相比来说这种方式比上面的margin的方式适应性更强。

• 内联元素
  内联元素的居中可以通过设置line-height属性来定义:

    span{
        line-height: 300px;
    }

这样该元素就会在这个300px的高度中居中显示。

特殊情况：flex布局

对于父容器为flex布局的块状元素的居中，可以对齐父容器设置：

align-items: center;        /* 垂直居中 */
 justify-content: center;   /* 水平居中 */