一、 文字水平居中和盒子水平居中区别

文字水平居中：text-align: center;
盒子水平居中：margin: 10px auto;

二、 插入图片和背景图片的区别：

插入图片更改大小用width和height
插入图片更改外置用margin 或padding 盒模型
背景图片更改大小只能用background-size
背景图片更改位置用background-position

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div {
            width: 300px;
            height: 300px;
            border: 1px solid pink;
            text-align: center;
            /*文字水平居中*/
            margin: 10px auto;
            /* 盒子水平居中 */
        }

        section {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        section img {
            /* 插入图片更改大小用width和height */
            width: 200px;
            height: 210px;
            /* 插入图片更改外置用margin 或padding 盒模型 */
            margin-top: 30px;
            margin-left: 50px;
        }

        aside {
            width: 400px;
            height: 400px;
            border: 1px solid purple;
            background: #fff url(鸣人2.jpg) 30px 50px no-repeat;
            /* 背景图片更改大小只能用background-size */
            background-size: 200px 210px;
            /* 背景图片更改位置用background-position */
        }
    </style>
</head>

<body>
    1.文字水平居中 和 盒子水平居中
    <div>文字水平居中</div>
    2.插入图片 和 背景图片
    <section>
        <img src="写轮眼.jpg" alt="">123
    </section>
    背景:
    <aside></aside>
</body>

</html>


一般情况下，背景图片适合做一些小图标使用；而产品展示之类的就用插入图片。