div垂直居中

最新推荐文章于 2025-09-12 15:58:40 发布

转载最新推荐文章于 2025-09-12 15:58:40 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3720375/blog/1607908

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		.container{display: flex;align-items: center}
		#a{height: 500px;width: 500px;background-color: royalblue;}
		#b{height: 250px;width: 250px;background-color: darkblue;}
	</style>
</head>

<body>
	<div class="container">
		<div id="a"></div>
		<div id="b"></div>
	</div>
</body>
</html>

如上所示三个div 内部两个div大小不一样给外部div加上display: flex;align-items: center样式就可以使得较小的div垂直居中

转载于:https://my.oschina.net/u/3720375/blog/1607908