58问答库 > 如何使文字在div中水平和垂直居中的css代码，<div>水平垂直居中<⼀div>

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

2024-11-27 21:34:26

推荐回答（5个）

回答（1）：

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

text-align:center; /*水平居中*/
line-height: 20px; /*行距设为与div高度一致*/

示例如下：

HTML元素
```
水平垂直居中
```

css样式

div{
	width:200px;height:200px;  /*设置div的大小*/
	border:1px solid green;    /*边框*/
	text-align: center;        /*文字水平居中对齐*/
	line-height: 200px;        /*设置文字行距等于div的高度*/
	overflow:hidden;
}

显示效果

回答（2）：

一个比较简单的方法就是这样：
你们假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：

水平垂直居中

CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。也就是说，如果你的DIV是200PX高，那你就让line-height:200px;文字就会垂直居中了。
不知道说明白没有。不行，你再HI我好了。

回答（3）：

水平垂直居中

div {
line-height: 60px;
height: 60px;
text-align: center;
vertical-align: middle;
}

希望你能看懂！！

回答（4）：

margin:0 auto;//水平居中
自己的height和父元素的lineheight一样可以垂直居中

回答（5）：

div {
line-height: 60px;
height: 60px;
text-align: center;
vertical-align: middle;
}