flex结合margin:auto定义包含项目居中显示

margin:auto;在伸缩盒中具有强大的功能，一个定义为“auto”的margin会合并剩余的空间，它可以用来把伸缩项目挤到其它位置。

Examples

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
		body{
			margin:0;
			padding:0;
		}
		.flex-container{
			display:flex;
			height:100vh;
			background:yellowgreen;
		}
		.flex-item{
			margin:auto;
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">
			<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" width="200">
		</div>
	</div>
</body>
</html>

效果图

image

posted on 2022-09-09 14:55  小馬過河﹎  阅读(40)  评论(0)    收藏  举报

导航