文字在div中水平居中,垂直居中

水平居中,给div添加css样式属性text-align: center;文字就会在div内水平居中

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	#box{
		width: 200px;
		height: 200px;
		border:2px solid #000;
		text-align: center;
	}

</style>
<body>
    <div id="box">心有尺素</div>
</body>
</html>

运行结果展示
在这里插入图片描述
垂直居中,给div添加css属性line-height: 200px;文字就会垂直居中,这个值为div的高度。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style>
	#box{
		width: 200px;
		height: 200px;
		border:2px solid #000;
		line-height: 200px;
	}

</style>
<body>
    <div id="box">心有尺素</div>
</body>
</html>

在这里插入图片描述

发布了201 篇原创文章 · 获赞 699 · 访问量 27万+

猜你喜欢

转载自blog.csdn.net/weixin_44535476/article/details/103454788