本文主要是介绍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=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>
这篇关于css图片自私应水平垂直居中【示例】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
