使用flex和box之中央布局

flex中间布局

display:flex配合flex-wrap:wrap更适合做自适应模型
做中间布局的话注意在里面加一层div

.flexbox{
	width: 500px;
	height: 500px;
	background: #ccc;
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.flexbox div{
	text-align: center;
	flex: 1;
}
<div class="flexbox">
	<div>
		 <img src="logo.png" alt="jikexueyuan">
	</div>
</div>

box中间布局

仅仅是中央布局的话推荐box方法,注意前面加-webkit-

.imgbox{
	width: 500px;
	height: 500px;
	background: #ccc;
	display: -webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
}
<div class="imgbox">
	<img src="logo.png" alt="jikexueyuan">
</div>
posted @ 2020-03-05 20:06  爱代码三千  阅读(158)  评论(0编辑  收藏  举报