本文为大家介绍了图片在div中居中的四种方法，希望对大家有所帮助。
方法一：
（推荐教程：css视频教程）
html：
立即学习“前端免费学习笔记（深入）”；
@@##@@
.title {
width: 100%;
font-size: 0;
height: 10%;
}
.title .content img {
width: 35%;
}
/*--主要的--*/
.content{
display: inline-block;
vertical-align: middle;
}
.flag{
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}方法二：
html
@@##@@css
.title { display: flex; justify-content: center; align-items: center; } .title img { width: 35%; }//该方法有些旧系统不支持方法三：
html
第三种方法css
.title { height: 15%; font-size: 18px; position: relative; } .title span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }方法四：
html
第四种方法css
.title { width: 200px; height: 200px; vertical-align: middle; display: table-cell; text-align: center; }相关推荐：CSS教程
![css实现图片在div中居中的方法有哪些]()
相关文章
css 想让列表项均分父容器宽度怎么办_使用 css flex flex:1 实现均分
css 想实现多列布局自动换行怎么办_flex-wrap wrap 与 justify-content
css 想让元素在 flex 容器内固定高度怎么办_align-items flex-start 与 height 配合
css清除浮动的本质_css clear属性的正确用法
css 想给最后一个列表项添加装饰怎么办_使用 :last-child 选择器定义尾项样式
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
