实现垂直居中 和 vertical-align

关于vertical：

1、定义和用法

vertical-align 属性设置该元素相对于所在行基线的垂直对齐方式。

只对行内元素（a，span，img等）的基线相对于该元素所在行的基线的垂直对齐（允许负值）。

2、实例列举

①

img标签的vertical-align: text-top

img标签的vertical-align: bottom

3、另一种用法：

在具有valign属性的表格元素（td、th）中，vertical-align等效于valign，规定单元格中内容的

垂直排列方式。

th,td{
width: 50px;
height: 50px;
vertical-align: bottom;
}

关于实现垂直居中的几种方式：

1、文本类居中

①单行文本居中：

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和

所在行的高度line-height相等即可。

如： 

div {   
        height:25px;   
        line-height:25px;   
        overflow:hidden;   
  }   

②未知行数的多行文本居中

如果一段内容，它的高度是可变的那么我们就可以使用设定Padding，使上下的padding值

相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全

填充的一种访求而已。可以使用类似下面的代码： 

div {   
  padding:25px;   
}   

③利用 vertical +line-height配合

.父元素{

lineheight:500px

}

.子元素{

display:inline-block;

vertical-align:middle

}

即可实现子元素在父元素line-height范围内的居中

2、其他元素类的居中

①需要居中的元素与父级元素大小相差不多：

利用margin-top和margin-left实现居中

②元素与父元素大小相差较大时：

利用position：50%居中，在利用 负的 margin调整元素自身大小带来的偏差

③利用display修改框模型

利用修改display，模拟出 table中td、th等具有的valign垂直对齐属性，

父元素： display：table；

vertical-align：middle；

子元素： display：table-cell；

④利用 绝对定位+margin：auto

.父元素{

position:relative;
width:1000px;
height:1000px;

}

.子元素{

margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;

}

⑤利用弹性盒模型

div{
	<span style="white-space:pre">	</span>display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */  
            display: -moz-box;    /* 老版本语法: Firefox (buggy) */  
            display: -ms-flexbox;  /* 混合版本语法: IE 10 */  
            display: -webkit-flex;  /* 新版本语法： Chrome 21+ */  
            display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */  
            /*垂直居中*/  
            /*老版本语法*/  
            -webkit-box-align: center;  
            -moz-box-align: center;  
            /*混合版本语法*/  
            -ms-flex-align: center;  
            /*新版本语法*/  
            -webkit-align-items: center;  
            align-items: center;  
            /*水平居中*/  
            /*老版本语法*/  
            -webkit-box-pack: center;  
            -moz-box-pack: center;  
            /*混合版本语法*/  
            -ms-flex-pack: center;  
            /*新版本语法*/  
            -webkit-justify-content: center;  
            justify-content: center;  
            margin: 0;  
            height: 700px;  
            width: 100% /* needed for Firefox */
			}