css如何实现图片在div标签居中

　　介绍

小编给大家分享一下css如何实现图片在div标签居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

方法一:html:

& lt; div类=皌itle"比; 　　& lt; div类=癴lag"祝辞& lt;/div> 　　& lt; div类=癱ontent"祝辞　　https://www.yisu.com/zixun/& lt; img src=" img_p1_title.png "> 　　

css

。标题{ 　　宽度:100%; 　　字体大小:0; 　　高度:10%; 　　} 　　.title .content img { 　　宽度:35%; 　　}/*——主要的——*/.content { 　　显示:inline-block; 　　vertical-align:中间; 　　} 　　.flag { 　　显示:inline-block; 　　vertical-align:中间; 　　高度:100%; 　　宽度:0; 　　}

方法二:

html

& lt; div类=皌itle"比; 　　https://www.yisu.com/zixun/& lt; img src=" img_p1_title.png ">

css

。标题{ 　　显示:flex; 　　justify-content:中心; 　　对齐项目:中心; 　　} 　　　　.title img { 　　宽度:35%; 　　}//该方法有些旧系统不支持

方法三:

html

& lt; div类=皌itle"比; 　　& lt; span>第三种方法& lt;/span> css

。标题{ 　　高度:15%; 　　字体大小:18 px; 　　位置:相对; 　　} 　　　　.title跨度{ 　　位置:绝对的; 　　上图:50%; 　　左:50%; 　　变换:翻译(-50%,-50%); 　　}

方法四:html

& lt; div类=皌itle"比; 　　& lt; span>第四种方法& lt;/span> css

.title { 　　宽度:200 px; 　　身高:200 px; 　　vertical-align:中间; 　　显示:表格单元; 　　text-align:中心; 　　}

以上是css如何实现图片在div标签居中的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!