html css图片居中
时间: 2024-01-02 13:23:06 浏览: 46
以下是两种在HTML和CSS中实现图片居中的方法:
1. 使用相对定位和负边距:
```html
<div style="width: 500px; height: 200px; position: relative; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -20px;" />
</div>
```
这种方法使用了相对定位和负边距来实现图片在父容器中水平和垂直居中。通过将图片的左上角定位在父容器的中心点,然后使用负边距将图片向左和向上移动自身宽度和高度的一半,从而实现居中效果。
2. 使用flex布局和文本居中:
```html
<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
</div>
```
这种方法使用了flex布局和文本居中的特性来实现图片在父容器中水平居中。通过将父容器的文本对齐方式设置为居中,然后将图片的显示方式设置为内联块级元素,从而实现居中效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)