css如何让块级元素居中

     大家都会有一个疑问，为什么文字能够上下左右居中，而块级元素和行内元素不能够直接垂直居中？

     我们要想将一个文字居中，那么就必须再它的父级元素中去使用text-align:center这个属性就是可以居中，但是没有办法垂直居中，那么这就是一个问题！

   其实很简单的一个原理，只要大家记住了就行了，什么原理呢？

  当前的这个元素必须是行内块元素，如果不是那么就是不行的！注意哈

  如果当前的元素不是行内块的话那么我们进行转化，用到display:inline-block转换成行内块元素，还需要用同级元素来配合使用，当我们已经将这个元素进行了元素的转换之后就可以在这个元素中使用vertical-align:middle:并且另外一个同级元素也要有这个vertical-align:middle,并且另外的这个元素如果不是行内块元素我们也要将它转换成行内块元素

    div{
                height: 500px;
                width: 500px;
                background:red ;
                text-align: center;
       }
            h2{
                width: 200px;
                height: 200px;
                background: greenyellow;
                display: inline-block;
                vertical-align: middle;
            }
            span{
                width: 0px;
                height: 100%;
                background: black;
                display: inline-block;
                vertical-align: middle;
            }

同级元素span只是配合使用，使用完之后就可以将宽度设置为0，是指不可见的状态！