CSS中将图片居中显示小技巧

最新推荐文章于 2022-05-15 23:36:25 发布

Noah_明天

最新推荐文章于 2022-05-15 23:36:25 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/noahchen666_qq_com/article/details/75532172

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

比如我想要一张图片在浏览器界面居中显示, 我可以在CSS中把图片所在标签的position设为absolute, 把 top, bottom, left, right属性设为 0 , 再把它的margin属性设为auto.

代码示例:

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <link rel="stylesheet" type="text/css" href="loading.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="loading">
    <div class="pic"></div>
</div>
</body>
</html>

CSS:

.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: yellow;
}

.loading .pic {
    background: url(winnower.gif) no-repeat;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}