CSS（六）：单行文字垂直居中

css没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现.

解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>单行文字垂直居中</title>
		<style>
			div {
				width: 200px;
				height: 40px;
				background-color: purple;
				line-height: 40px;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div>我要居中</div>
	</body>
</html>
posted @ 2022-06-08 10:56  pure3417  阅读(39)  评论(0)  编辑  收藏  举报