css設(shè)置文字水平垂直居中的方法：1、給文字元素添加“{align-items:center}”樣式使其水平方向居中；2、給文字元素添加“{justify-content:center}”樣式使其垂直方向居中即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css設(shè)置文字水平垂直居中的方法

1、新建一個(gè)html文件，命名為test.html，用于講解css如何讓文字水平和垂直都居中。在div內(nèi)，使用span標(biāo)簽創(chuàng)建一行文字，用于測(cè)試。設(shè)置div的class屬性為mydiv。

在css標(biāo)簽內(nèi)，通過(guò)class設(shè)置div的寬度為200px,高度為100px,邊框?yàn)?px。

2、在css標(biāo)簽內(nèi)，將display屬性設(shè)置為flex，實(shí)現(xiàn)flex布局，再將align-items屬性設(shè)置為center(水平方向居中)，justify-content屬性設(shè)置為center（垂直方向居中）。

在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。

總結(jié)：

1、在div內(nèi)，使用span標(biāo)簽創(chuàng)建一行文字，設(shè)置div的class屬性為mydiv。

2、在css標(biāo)簽內(nèi)，通過(guò)class設(shè)置div的寬度為200px,高度為100px,邊框?yàn)?px。

3、在css標(biāo)簽內(nèi)，將display屬性設(shè)置為flex，實(shí)現(xiàn)flex布局，再將align-items屬性設(shè)置為center(水平方向居中)，justify-content屬性設(shè)置為center（垂直方向居中）。