社区
掘金
图片居中
有的时候图片需要在盒子里垂直居中，比如导航的 logo，侧边的图片链接等，需要垂直居中。本篇将随时更新图片居中的方法。
居中方法
- 一、高度=行高法
大多情况下，行高与高度相等内容居中用于文字，其实这也可以用于图片，不过不推荐，因为比较特殊，它的对齐方式是默认图片的底线居中，用这个方法的话得设置图片的对齐方式为
vertical-align: middle。但这也是一种方法，示例如下：
<style>
.t1 {
width: 200px;
height: 200px;
line-height: 200px;
background-color: red;
}
.t1 img {
vertical-align: middle;
}
</style>
<body>
<div class="t1">
<img src="https://jiangck.com/favicon.ico">
</div>
</body>
-
二、内外边距法
利用 UI 给好的图可以直接使用利用内外边距来这是图片的垂直居中对齐- 父元素设置 padding-top 需要重新计算父容器的高度（需要的话）
- 子元素设置 margin-top
-
三、position 定位
定位功能非常强大，可以直接利用子绝父相（子元素绝对定位，父元素相对定位）来设置居中(top)，然后将图片反向上移一般的宽度即可实现，示例如下：
<style>
.t2 {
width: 150px;
height: 150px;
background-color: blue;
position: relative;
}
.t2 img {
position: absolute;
top: 50%;
margin-top: -64px;
}
</style>
<body>
<div class="t2">
<img src="https://jiangck.com/favicon.ico">
</div>
</body>
内事不懂问百度，外事不懂问谷歌~