CSS 水平居中图片在div中

在本文中，我们将介绍如何使用CSS来水平居中一张图片在一个div容器中。水平居中图片可以让网页看起来更加美观和专业。

阅读更多：CSS 教程

使用text-align属性

最简单的方法是使用text-align属性来实现水平居中。将div容器的text-align属性设置为”center”，图片将会自动水平居中。

div {
    text-align: center;
}

img {
    display: inline-block;
}

在这个例子中，我们给div容器设置了text-align属性为”center”。然后给图片设置为display:inline-block，使其可以居中。这种方法适用于div容器之间没有其他内容或元素的情况。

使用margin属性

另一种常见的方法是使用margin属性来实现水平居中。可以通过设置左右margin为”auto”来将图片水平居中。

div {
    width: 500px;
}

img {
    margin-left: auto;
    margin-right: auto;
}

在这个例子中，我们给div容器设置了一个固定的宽度为500px。然后给图片设置了左右margin为”auto”，使其水平居中。这个方法适用于div容器之间有其他内容或元素的情况。

使用flexbox布局

Flexbox布局是一种新的CSS布局模型，可以更方便地实现元素的排列和对齐。通过使用flexbox布局，我们可以很容易地实现图片水平居中。

div {
    display: flex;
    justify-content: center;
}

img {
    align-self: center;
}

在这个例子中，我们给div容器设置了display:flex以启用flexbox布局。然后使用justify-content属性将图片水平居中。使用align-self属性将图片垂直居中。这种方法在很多情况下都适用，并且可以方便地实现其他布局效果。

使用position属性

另一种方法是使用position属性来实现图片的水平居中。可以将图片的position属性设置为absolute，然后将left和right属性都设置为0。这样图片就会自动水平居中。

div {
    position: relative;
    width: 500px;
}

img {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

在这个例子中，我们给div容器设置了position:relative以作为图片定位的参考。然后给图片设置了position:absolute，使其脱离正常文档流。接着通过设置left和right属性为0来让图片水平居中。最后通过设置margin-left和margin-right为auto来保证图片在水平方向上居中。