4月30日笔记

1.单行文本垂直居中（行高方法）
代码：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直居中</title>
		<style type="text/css">
			body{
				font-size:48px;
				color:red;
			}
			
			
			
			
			
			
			div.a{
				
				height:200px;
				background-color:blue;
                line-height:200px;
				text-align:center;
				
								
			}
			
			
		</style>
	</head>
	<body>
		<div class="a">
			hello
		</div>
		
	</body>
</html>

效果图：

屏幕截图 2026-04-30 091649

2.单行多行固定高度文本垂直居中（flex方法）
代码：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直居中</title>
		<style type="text/css">
			body{
				font-size:48px;
				color:red;
			}
			
			
			
			
			
			
			div.a{
				
				height:200px;
				background-color:blue;
				border:1 px solid #cc
				display: flex;
				text-align:center;
				align-items:center;
				justify-content: center;
				
				
				
								
			}
			
			
			
			
			
		</style>
	</head>
	<body>
		<div class="a">
			hello<br>
			你好<br>
			李华<br>
			欢迎
		</div>
		
	</body>
</html>

效果图：

屏幕截图 2026-04-30 092043

3.单行多行适用不固定高度（padding方法）
代码：

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding方法</title>
		<style type="text/css">
			body{
				font-size:48px;
				color:red;
			}
			
			
			.a{	
				height:200px;
				background-color:blue;
				border:1 px solid #ddd;
				margin:20px;
				padding:16px 20px;
				text-align:center;
			
			}
			
			
		</style>
	</head>
	<body>
		<div class="a">
			hello<br>
			你好<br>
			李华<br>
			欢迎
		</div>
	</body>
</html>

效果图：

屏幕截图 2026-04-30 093508

posted @ 2026-04-30 09:36  createcoding  阅读(26)  评论(0)    收藏  举报