div 居中text-align与vertical-align的区别

有两个样式属性可用于控制网页内容的对齐：text-align和vertical-align。

1、text-align（水平对齐）

text-align样式使元素在其定界区域内水平对齐，其取值可以是left、right、center或justify。justify使元素两端对齐。

2、vertical-align（垂直对齐）

vertical-align属性与text-align属性类似，只是用于使元素在垂直对齐。vertical-align属性指定元素如何与其父元素（在有些情况下，是与网页中元素的当前行）对齐。“当前行”指的

是显示在元素内的元素所处的垂直位置，换句话说，是内联元素。如果几个内联元素显示在同一行，可将其垂直对齐方式设置为相同，使它们垂直对齐。

下面是vertical-align属性的可能取值。

top:将元素的顶部与当前行对齐。

middle:将元素的中心与当前行对齐。

bottom:将元素的底部与当前行对齐。

text-top：将元素的顶部与父元素的顶部对齐。

baseline：将元素的基线与父元素的基线行对齐。

text-bottom：将元素的底部与父元素的底部对齐。

写在最后：

如果想使一个内容水平居中就使用text-align:align，反之如果是垂直居中使用text-align + vertical-align。