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

最新推荐文章于 2023-09-20 13:51:42 发布

weixin_30438813

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stono/p/5584606.html

本文介绍了一种使用CSS实现文字在div容器内水平和垂直居中的方法。通过设置text-align:center和line-height等于div高度的方式，使得文字能够在div内部精确地居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

text-align:center; /*水平居中*/
line-height: 20px; /*行距设为与div高度一致*/
示例如下：
HTML元素
<div>水平垂直居中</div>
css样式
div{
	width:200px;height:200px;  /*设置div的大小*/
	border:1px solid green;    /*边框*/
	text-align: center;        /*文字水平居中对齐*/
	line-height: 200px;        /*设置文字行距等于div的高度*/
	overflow:hidden;
}

转载于:https://www.cnblogs.com/stono/p/5584606.html