[分享]css中div和img居中

在网页设计中，经常需要对页面中的元素进行排版和定位。其中，最常用的两种元素是div和img标签。而如何使这两种元素在页面中居中呢？接下来，我们将分别介绍两种方法。 对于div标签，我们可以使用CSS中...

在网页设计中，经常需要对页面中的元素进行排版和定位。其中，最常用的两种元素是div和img标签。而如何使这两种元素在页面中居中呢？接下来，我们将分别介绍两种方法。
对于div标签，我们可以使用CSS中的margin属性进行居中。首先，在CSS文件中设置div的样式：

div {
    width: 300px;   /* 设置div的宽度 */
    height: 200px;  /* 设置div的高度 */
    margin: auto;   /* 设置div的上下左右外边距均为auto */
    background-color: #ccc;   /* 设置div的背景颜色为灰色 */
} 

这里我们将div的宽度设置为300px，高度设置为200px，并使用margin: auto;实现水平和垂直居中。需要注意的是，margin属性只有在该元素的宽度和高度已经确定的情况下才能生效。
而对于img标签，我们可以使用CSS中的text-align和line-height属性进行居中。首先，在CSS文件中设置img的样式：

img {
    display: block;   /* 将img设置为块级元素 */
    margin: 0 auto;   /* 设置img的左右外边距为auto */
    text-align: center;   /* 设置img的文本对齐方式为居中 */
    line-height: 200px;   /* 设置img父元素的行高为200px */
} 

这里我们将img设置为块级元素，并使用margin: 0 auto;实现水平居中。然后，通过设置img父元素的text-align: center;将img居中对齐。同时，设置img父元素的line-height属性与img的高度相等，也可以实现垂直居中。
以上就是使用CSS中margin和text-align/line-height属性实现div和img居中的方法。在实际应用中，还可以根据具体需求进行进一步的优化。