Question

怎样让html中的文字垂直水平居中显示

Answer 1

1、在html编辑器中，新建一个html文件，例如：index.html。

2、在index.html中的body标签中，填入html代码：

<div style="position: absolute;top: 50%;left: 50%;height: 10%;width: 30%;margin: -5% 0 0 -15%;">123asfafada</div>

3、最后，浏览器运行index.html，此时html中的文字被成功垂直水平居中显示。

Answer 2

使文字在div中水平和垂直居中的的css样式为

1. 水平居中：

   text-align:center; /*水平居中*/

   line-height: 20px; /*行距设为与div高度一致*/
   

2.垂直居中：   

div{

width:200px;height:200px;  /*设置div的大小*/

border:1px solid green;    /*边框*/

text-align: center;        /*文字水平居中对齐*/

line-height: 200px;        /*设置文字行距等于div的高度*/

overflow:hidden;

}

显示效果