css元素垂直居中/vertical-align：middle；

前言

一直以来关于元素居中都是困扰着前端的问题，为了元素的垂直居中，头发都熬没了，小谭今天为大家介绍几种可以实现元素垂直居中的方法，以及每个方法的优缺点。

准备

一个名为box的div，设置宽高200px，box里嵌套一个图片，图片宽高为100px，如图：

我们需要实现图片在box的居中，如图：

实现水平居中很简单，给box添加属性text-align：center；即可，实现垂直居中的方法有：

---

1.行高以及vertical属性

给box添加行高并设为200px（与box等高），再在box添加属性vertical-align：middle；即可实现图片的垂直居中。行内块元素会有上下间距的bug，将font-size设为0即可

缺点：如果需要在box里添加文字，可以将图片或文字再嵌套一个盒子单独设置字体大小和行高就行。

 

2.使用定位

给box加relative定位，图片加absolute定位，图片上下左右为0，margin设为auto，即可实现；

或者left：50%；，top:50%;，再添加transform：translate（-50%，-50%）可以实现，因为transform为css3新增属性，所以这种方法会有兼容问题；

也可以把transform改为margin，设置负高度的一半和负宽度的一半，这种方法虽然没有兼容问题，但是需要知道图片的准确宽高。

 

3.利用表格属性

给图片再嵌套一个盒子b（b可以为任意双标签），把box转化为表格元素（display：table），把嵌套在图片外面的盒子b转化为单元格元素（display：table-cell），即转换为表格里的td，再添加vertical-align：middle即可实现，这种方法可以接受父元素和子元素都是未知宽高。

 

4.利用vertical-align

再在box里添加一个图片，高度设为100%，宽度为0，再给两张图片添加属性vertical-align：middle即可实现垂直居中，这种方法可以不用设置行高。

---

注意

如果图片尺寸不一样，可以给图片设置最大宽度（max-width）和最大高度（max-height）就可以实现不同尺寸图片的水平垂直居中

---

结束语

好啦，今天就是小谭要分享的内容，如果有什么写的不对地方，或者有大佬有更好的方法实现，欢迎来和小谭进行技术分享哟，小谭不胜荣幸，啾咪~~