css3中让图像居中用哪个元素(属性)?

css3中让图像居中用哪个属性?下面本篇文章给大家介绍一下CSS让图像居中的几种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css3中让图像居中用哪个元素?

1、使用弹性布局flex来让img图片居中

设置display: flex;实现flex弹性布局,在设置justify-content: center;让图片水平居中对齐,设置align-items: center;让图片垂直居中对齐。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img图片居中</title>
        <style>
            *{margin: 0;padding:0;}
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
                border: 1px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .demo img{
                width: 200px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img src="1.jpg" />
        </div>
    </body>
</html>

效果图:

1.png

2、使用background-position属性让背景图片居中

background-position 属性设置背景图像的起始位置,拥有两个值,分别代表:水平位置,垂直位置。

示例:

<!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-position:50% 50% ;
                /*或 background-position:center center;*/
                background-repeat:no-repeat ;
            }
        </style>
    </head>

    <body>
        <div class="demo"></div>
    </body>

</html>

效果图:

2.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css3中让图像居中用哪个元素(属性)?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏