如何使文字在div中水平和垂直居中的css代码

可以用“text-align”属性和“line-height”属性。

1、新建html文件，在body标签中添加div标签，在div标签输入文字，这里以“演示文本”为例，给div标签设置宽度、高度和背景色属性，属性值分别为200、100和灰色，这时“演示文本”默认位置为div盒子的左上方：

2、这时给div标签添加上“text-align”属性，属性值为“center”，这时文字将会在div容器中水平居中：

3、这时给div标签添加行高“ling-height”属性，属性值为高度的值“100px”，再添加“vertical-align”属性，属性值为“middle”，这时文字将会水平垂直都居中：

下面介绍关于html元素水平居中的几种方式

1、对于行内元素采用text-align:center的方式

2、采用margin:0 auto来实现水平居中显示

3、用table实现

4、块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示

5、父子元素都采用相对定位，父元素left:50%子元素left:-50%相对自己的长度减回50%，这样实现向右偏移后拉回多的部分

6、采用css3的flexbox，display:flex

7、用父元素的 display:relative直接采用position:absoluteleft:0right:0margin:auto来实现水平以居中

下面是讲解的具体的代码：

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

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

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

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

---