我们在应用图片的时候经常会碰到要让图片在容器里居中的情况，水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢？是不是给img加vertical-align: middle;就可以了呢？

答案显然是否定的，单纯的给img加vertical-align: middle;并不能行，我平时用的比较多的办法有两种。

方法一：

<style type="text/css">
	body,p {
		margin: 0;
		padding: 0;
		}
	div {
		width: 300px;
		height: 300px;
		border: 1px solid #c6c6c6;
		margin: 50px auto;
		text-align: center;
		}
	a {
		display: inline-block;
		vertical-align: middle;
		}
	span {
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle; 
		}
	img {
		border: 1px solid #00f;
		}
	
</style>
</head>

<body>
<div>
    	<a href="#"><img src="images/img_03.jpg" /></a><span></span>
</div>
</body>

我的做法是添加一个空的span标签，然后给span标签设置成100%的高再让它居中，这样就能让a标签页同时居中。有些人会问你为啥要给img包a标签呢？实际应用中我们的图片经常都是需要可以被点击的跳转链接的。如果你的图片不需要被点击你也可以直接把vertical-align: middle; 加在img中。像这样

img {
		border: 1px solid #00f;
		vertical-align: middle;
		}
<div>
    	<img src="images/img_03.jpg" />
</div>

效果是一样的。
方法二：

div {
	position: relative;
    width: 100%;
    height: 238px;
}
img {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
<div>
    	<img src="images/img_03.jpg" /><span></span>
</div>

通过绝对定位，垂直和水平都居中了

方法三：

这个很简单，之间用 (div高 - 图片高) /2 然后设置margin-top 就ok了，但这么做不能够自适应，纯靠人工计算显得有点蠢。

下面是两种方法的实现效果图：

这里写图片描述


写得不对的地方欢迎交流指正，码字不易，拒绝未沟通情况下转载。CSDN博客：PromiseCao;



所有博客已转移至个人博客地址：www.clramw.top

相关文章：css让图片自适应容器（div）大小

深度好文：清除浮动float的七种方法总结和兼容性处理

# 容器
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生