css3 - 让文字位于div元素正中央

使用盒布局的时候，可以使用

box-pack

属性及

box-align

属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用

-moz-box-pack

、

-moz-box-align

的形式；在Safari、Chrom浏览器中，需要使用

-webkit-box-pack

、

-webkit-box-align

的形式。

在使用CSS 1.0或CSS 2.0的时候，在div元素内部直接放置文字的场合下，如果想让文字垂直居中，直接使用

text-align

属性就可以了，但若要让文字垂直居中，由于div元素是不能使用

vertical-align

属性的，所以就很难做到了。在CSS 3中，只要让div元素使用

box-align

属性（排列方向默认为horizontal）,文字就可以垂直居中了。

如图，有一个div元素，元素中有一些文字，使用

box-pack

属性及

box-align

属性让文字位于div元素正中央；

html：

css：

div {
      display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

      width: px;
      height: px;
      background-color: pink;
}
           

解析：

box-pack属性及box-align属性的属性值及其含义

属性值	排列方向	box-pack属性值的含义	box-align属性值的含义
start	horizontal	左对齐，文字、图像或子元素被放置在元素最左边	顶部对齐，文字、图像或子元素被放置在元素最顶部
center	horizontal	中对齐，文字、图像或子元素被放置在元素中部	中部对齐，文字、图像或子元素被放置在元素中部
end	horizontal	右对齐，文字、图像或子元素被放置在元素最右边	底部对齐，文字、图像或子元素被放置在元素最底部
start	vertical	顶部对齐，文字、图像或子元素被放置在元素最顶部	左对齐，文字、图像或子元素被放置在元素最左边
center	vertical	中部对齐，文字、图像或子元素被放置在元素中部	中对齐，文字、图像或子元素被放置在元素中部
end	vertical	底部对齐，文字、图像或子元素被放置在元素最底部	右对齐，文字、图像或子元素被放置在元素最右边