css图片自私应水平垂直居中【示例】

最新推荐文章于 2024-04-29 09:17:59 发布

gqzydh

最新推荐文章于 2024-04-29 09:17:59 发布

阅读量166

点赞数

分类专栏：实例文章标签： css 居中

本文链接：https://blog.csdn.net/gqzydh/article/details/88962836

版权

实例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css图片自私应水平垂直居中【示例】
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title>什么都没有哦！</title>
<style>
html, body { height: 100%; }
body { height: 100%; position: relative; margin: 0; padding: 0; }
.load_box { height: 100%; width: 100%; position: relative; }

/* .load_cont{position: absolute; height:5.466666666666667rem; width: 9.733333333333333rem;  top: 40%; left: 50%; margin-left: -4.87rem; text-align: center;} */
.load_cont { position: absolute; width: 9.733333333333333rem; top: 50%; left: 50%; text-align: center; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.load_img { height: 5.466666666666667rem; width: 9.733333333333333rem; background: transparent url(https://img-blog.csdnimg.cn/2019040209042417.png) no-repeat center center; font-size: 1.1rem; color: #999999; margin-bottom: 10px; background-size: 100%; }
</style>
</head>
<body>
	<div class="load_box">
		<div class="load_cont">
			<div class="load_img"></div>
			加载失败，稍后再试
		</div>
	</div>		
</body>
</html>

gqzydh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css图片自私应水平垂直居中【示例】

css图片自私应水平垂直居中【示例】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width...
复制链接

扫一扫