基于 div 定位

CSS

body {
	margin: 0;
}
	.ifdisplay {
	 margin: 0;
	 overflow: hidden;
	 min-height: 100vh;
	 display: -ms-flexbox!important;
	 display: flex!important;
	 -ms-flex-align: center!important;
	 align-items: center;
	 justify-content: center;
}
img.avatar {
	border-radius: 50%;
}

HTML

<div class="ifdisplay">
	<img src="https://static.hexingxing.cn/v2/element/webp/nice-highres.png" class="avatar">
</div>

基于 body 定位

CSS

body {
	margin: 0;
	overflow: hidden;
	min-height: 100vh;
	display: -ms-flexbox!important;
	display: flex!important;
	-ms-flex-align: center!important;
	align-items: center;
	justify-content: center;
}
img.avatar {
	border-radius: 50%;
}

HTML

<img src="https://static.hexingxing.cn/v2/element/webp/nice-highres.png" class="avatar">

Demo

https://static.hexingxing.cn/v3/css/relatively_centred_of_div/

https://static.hexingxing.cn/v3/css/relatively_centred_of_body/


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注