开发者社区> 杰克.陈> 正文

只用CSS实现容器内图片上下左右居中

2014-01-04 1124

简介： 原文只用CSS实现容器内图片上下左右居中一直以来，大家都知道，DIV容器内设置 text-align:center 即可让图片居中，但是DIV内默认的图片是上对齐，不会上下居中，如果想要实现这样的效果，JS判断是比较麻烦的，因为DIV容器内的图片高度是不一定的，那么只有用table了，我想大...

+关注继续查看

原文只用CSS实现容器内图片上下左右居中

一直以来，大家都知道，DIV容器内设置 text-align:center 即可让图片居中，但是DIV内默认的图片是上对齐，不会上下居中，如果想要实现这样的效果，JS判断是比较麻烦的，因为DIV容器内的图片高度是不一定的，那么只有用table了，我想大多数人事不愿意这么做的，那么怎么办呢，还是用CSS控制下吧
其实早就在找这样的代码，今天终于自己试着写了一份出来，屌丝们可以自己分析下原理，其实很简单
如果你之前也不会，那么希望对你有所帮助

复制代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>纯css实现div容器内图片上下左右居中效果-柯乐义</title>
 6 <style type="text/css">
 7 *{ margin:0; padding:0; list-style:none;}
 8 img{ border:none;}
 9 
10 .main{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;}
11 .main a{display:table-cell;vertical-align:middle;width:600px; height:400px; }
12 .main a img{max-width:600px;max-height:400px; }
13 </style>
14 </head>
15 
16 <body>
17 <div class="main">
18 <a href="http://keleyi.com/a/bjac/wynnj5xc.htm" target="_blank"><img src="http://keleyi.com/keleyi/phtml/picnext/images/k06.jpg" alt="柯乐义" /></a>
19 </div>
20 </body>
21 </html>

复制代码

兼容IE8，火狐，Chrome，Opera等浏览器

http://www.cnblogs.com/sosoft/

原文和效果： http://keleyi.com/a/bjad/fc6fwm34.htm

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发前端开发容器

CSS图片 CSS实现 CSS居中 CSS容器 CSS图片居中

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

浅谈SQL Server内部运行机制 2358 【.NET Core项目实战-统一认证平台】第十章授权篇-客户端授权 2820 基于Token认证的多点登录和WebApi保护 2659 一文读懂阻塞、非阻塞、同步、异步IO 4558 如何构建高性能MySQL索引 1929

相关文章

董员外

我已经说了5种css居中实现的方式了，面试官竟然说还不够？

这是一篇关于居中对齐方式的总结开篇之前，先问一下大家都知道几种居中的实现方式？面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式使用flex布局设置居中。使用flex 时也能通过给子项设置margin: auto实现居中。使用绝对定位的方式实现水平垂直居中。使用grid设置居中。使用grid时还能通过给子项设置margin: auto实现居中。使用tabel-cell实现垂直居中。还有一种不常用的方法实现垂直居中。最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设

35 0

somnus_小凯

CSS的垂直居中和水平居中总结

CSS的垂直居中和水平居中总结

35 0

游客l3pmnkij3b2yk

CSS水平居中+垂直居中+水平/垂直居中的方法总结

CSS水平居中+垂直居中+水平/垂直居中的方法总结

74 0

萌狼蓝天

【前端】【样式】CSS居中的三种方式

【前端】【样式】CSS居中的三种方式

23 0

bqospzg5rfs7g

CSS 居中总结 | 学习笔记

快速学习 CSS 居中总结

34 0

前端歌谣

html+css实战155-位移-居中

html+css实战155-位移-居中

41 0

前端歌谣

html+css实战153-定位-居中

html+css实战153-定位-居中

24 0

前端歌谣

html+css实战154-位移-居中

html+css实战154-位移-居中

55 0

前端歌谣

html+css实战106-版心居中

html+css实战106-版心居中

135 0

ADI

[记录] CSS-不定宽高水平居中

[记录] CSS-不定宽高水平居中

26 0

+关注

杰克.陈

一个安静的程序猿~

文章

问答

作者高分内容

更多

浅谈SQL Server内部运行机制 2358 【.NET Core项目实战-统一认证平台】第十章授权篇-客户端授权 2820 基于Token认证的多点登录和WebApi保护 2659 一文读懂阻塞、非阻塞、同步、异步IO 4558 如何构建高性能MySQL索引 1929

文章排行榜

最热

最新

1 重识Flutter 非常用Slivers组件速览 - part3 84061

2 无缝切换？从Vue到React 81241

3 fastjson2为什么这么快 74339

4 Meetup 报名丨共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64335

5 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63313

6 结构化总结与结构化思考之《金字塔原理》总结 56114

7 C语言进阶——指针进阶试题讲解（万字长文详解） 54806

8 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 53927

9 快速开发光伏电站数字孪生运维系统（一） 44477

10 操作系统课程设计：新增linux驱动程序 41744

11 IoT设备的数据格式ProtoBuf转JSON 41038

12 重构的核心-让代码保持整洁 40240

13 【Linux】-- 开发工具yum、vim、gcc、g++、gdb、make、makefile使用介绍（一） 39756

14 IoT设备数据业务价值洞察实践 37817

15 【C++修炼之路】类和对象（中）—— 筑基篇 37098

16 Hive数据倾斜的原因以及常用解决方案 33011

17 高并发编程之阻塞队列 32541

18 Spring 事务【隔离级别与传播机制】 30306

19 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29331

20 计网之初识网络(理解网络传输的基本流程) 27823

1 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 56

2 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 86

3 身份证实名认证接口验证不一致的原因 60

4 JVM学习.03 类加载机制 58

5 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token 139

6 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 136

7 官宣｜Apache Flink 1.17 发布公告 294

8 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 175

9 基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能 136

10 重构计算，驱动视界：阿里云视觉计算思考与实践 144

11 阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准，促进数字孪生互联互通生态建设 300

12 基础篇丨链路追踪（Tracing）其实很简单 84

13 全新升级｜ECS成熟度评估与洞察，助你精准定位运维风险 86

14 网络平台挑选实名制认证API接口的注意事项 105

15 vika维格表 x 阿里云计算巢：SaaS 云端私有化部署，助力企业数字化转型 261

16 为什么 C# 可能是最好的第一编程语言 149

17 Airwallex 基于 Flink 打造实时风控系统 115

18 IoT小程序在展示中央空调采集数据和实时运行状态上的应用 22848

19 深入理解事务 15997

20 机器学习算法（一）: 基于逻辑回归的分类预测 23541

相关课程

更多

前端开发CSS基础

4155

21

去学习

零基础学前端HTML+CSS

8754

57

去学习

CSS 快速掌握

19077

49

去学习

体验-多容器 Pod 及其设计模式

357

1

去学习

理解 Pod 和容器设计模式

520

1

去学习

现代应用容器技术快速入门

1049

4

去学习

相关电子书

更多

零基础CSS入门教程

立即下载

中小企业如何巧用容器技术

立即下载

手机淘宝H5和Weex容器的构建实践

立即下载