简单理解css中的垂直居中和水平居中，即vertical-align和text-align属性

转自：https://blog.csdn.net/liwusen/article/details/51051079

                            前言：在很多情况下，我们要使用到内容的居中，这里的居中包括了垂直居中和水平居中，下面来浅谈一下

             对于水平居中的属性text-align和垂直居中属性vertical-align的理解

 

            （1）text-align

               如果要实现水平居中，比如我们要实现块状元素(block)内，子元素的水平居中

                <div class="div1">
                         <div class="div2">

                        </div>
                </div>

                比如我们要实现div2元素在父元素div1内的居中，我们则会有：

                .div2{

                    display:inline-block

                 } 

                并且要设置父元素的属性即：

                .div1{

                    text-align:center

                 }

                实现效果为：

                

                 关键：要实现这种水平居中，在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中 

                 的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。

 

                （2）vertical-align

                  这里简单的说一下，vertical-align属性实现垂直居中

                   

                 <div class="div1">
                         <div class="div2">

                        </div>
                </div>

                 要实现div1父元素内的子元素div2，让div2实现垂直居中，我们可以这样设置：

                 .div1{

                     display:table-cell;

                     vertical-align:middle;

                  } 

                 实现的效果为：

                

                注：简单的实现垂直居中，我们可以发现并不需要对子元素进行特殊设置，我们只需要设置父元素的

                display:table-cell;vertical-align:middle  之后就能实现垂直方向的居中。（这种方式实现的垂直居中，会

                导致水平不居中）

                 

              (3)补充

 

               1.父元素设置属性为text-align:center,并设置子类快为inline-block那么，子类3个块都会实现水平居中

 

               2.父元素设置为line-height:= height: 并设置子类块属性为inline-block，那么子类的所有都能实现垂直居中

               

               3.对于text-align:center,如果父类元素的display:inline-flex，则子元素不能实现水平居中

 

              2017.1.13补充，line-height:100px设置行高，此时给定了基线，此时如果要实现居中，只需要让基线居中，                通过设置vertical-align:middle