css图片居中（如何让图片水平居中？）

如何让图片水平居中？ 想必每个有过做网页的人都同样经历过一种窘境，那就是如何让图片水平居中？尤其是在一些需要对齐设计图，特别是绝对定位的场景下，图片居中的问题尤为突出。今天我们就来一起学习一下实现图片水平居中的CSS技巧吧。 一、使用文本居中方式实现图片水平居中 文本自身固有的居中方式对图片也是有效的。只需将图片包裹在div中，再使用text-align:center属性声明即可。

1.使用文本居中方式实现图片水平居中

在这个例子中我们使用了内联样式。业务场景下你需要抽离css。首先设置class，css样式如下： .center { text-align:center; } 然后在HTML中使用该class即可。

1.使用文本居中方式实现图片水平居中

二、使用内外边距实现图片水平居中 使用内外边距来实现图片水平居中其实也很简单，只需要掌握几个关键点即可。首先需要利用CSS的margin:auto属性，将图片的左右margin都设置为auto，这样图片就能够水平居中。而为了避免图片从div顶部对齐，我们需要为外围div设置text-align: center;声明。

2.使用内外边距实现图片水平居中

同样在业务场景下你需要抽离css，使用class的方式如下 .center { text-align:center; } .center img { display:block; margin:0 auto; } 在HTML中使用该class即可。

2.使用内外边距实现图片水平居中

三、使用Flex布局实现图片水平居中 Flex布局是CSS3中的一种布局方式。强大的Flex布局不仅可以方便的实现水平居中，还能够处理多种布局问题。使用Flex布局的方法跟使用内外边距的方法很类似，也是将图片包裹在div中，只不过需要为div添加display:flex属性。

3.使用Flex布局实现图片水平居中

同样，在业务场景下你需要写抽离的CSS。使用内网Flex布局的样式如下 .container { display:flex; justify-content:center; align-items:center; /*可选*/ } .container img { max-width:100%; } 在HTML中，只需要使用设置好的class即可

3.使用Flex布局实现图片水平居中

以上三种方式是在Web开发中最基础的实现图片水平居中的方法。当然实际使用中，还有很多其他的方法，包括CSS Grid布局、表格布局、绝对定位等，使用场景各不相同，需要结合实际场景进行选择。希望以上内容能够帮助你顺利解决图片居中的问题。