怎么让CSS文件里图片居中-css教程-PHP中文网

怎么让CSS文件里图片居中

藏色散人

发布： 2021-02-18 08:57:06

原创

4564人浏览过

让CSS文件里图片居中的方法：首先创建一个HTML示例文件；然后引入一张背景图片；最后通过css中的“background-position”属性实现图片居中即可。

怎么让CSS文件里图片居中

本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑。

CSS让背景图片居中的方法

其实很简单，css中的background-position属性就可以实现背景图片的水平和垂直方向居中对齐，下面我们通过简单的代码示例来介绍background-position属性是如何设置背景图片居中显示的。

我们先使用background属性显示背景图片：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片居中</title>
        <style>
            *{margin: 0;padding:0;}
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
                border: 1px dashed #000;
                background-image:url(1.jpg) ;
                background-size:200px 160px ;
                background-repeat:no-repeat ;
            }
        </style>
    </head>
    <body>
        <div class="demo">
         
        </div>
    </body>
</html>

登录后复制

效果图：