css是前端开发必不可少的一门语言，本文主要介绍了css居中实例之大小不固定的图片居中方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
1.利用table-cell实现垂直居中
[站外图片上传中……(5)]
登录后复制
p{ width: 500px; height: 500px; background: #ccc;}.box1{ text-align:center; display: table-cell; vertical-align: middle; /* font-size: 118px; */}img{ vertical-align: middle;}
登录后复制
利用父元素为display:table-cell类型实现垂直居中，table在ie8+的浏览器中自带的垂直居中的属性。
注意：img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。
2.多行文本的垂直居中方法
立即学习“前端免费学习笔记（深入）”；
有时可能我们会遇到需要多行文本垂直居中的一些情况，但是做起来有时有些麻烦，需要我们换个思路去实现。
你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据
登录后复制
p{ width: 500px; height: 500px; background: #ccc;}.box3{ display: table-cell; vertical-align: middle;}span{ display: inline-block; vertical-align: middle;}
登录后复制
将内部的文本用span标签（其他标签也可以）包裹起来，把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。
相关推荐：
CSS实现图片居中的三种方式
CSS实现图片居中的三种方式
CSS实现图片居中的三种方式
以上就是CSS图片大小不固定的居中方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2901012.html
