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	底部對齊，文字、圖像或子元素被放置在元素最底部	右對齊，文字、圖像或子元素被放置在元素最右邊