如何实现元素的垂直居中

最近在写项目时,遇到图片和文字垂直居中的问题,所以总结了一下,分享给大家

一、利用vertical-align:middle实现垂直居中

(1).图片和文字垂直居中

类似：

图片文字垂直居中

代码：

<p>文字文字文字文字文字文字</p>

</div>

CSS样式：

<style>

.box{width:500px;}

.box img{display:inline-block;vertical-align: middle;}

.box p{display:inline-block;vertical-align: middle;}

</style>

（2）.图片元素在一个盒子中垂直居中

类似：

其实只有一个图片在父盒子中垂直居中上面的方法也能实现，这里简单说一下，给图片的父盒子再添加一个空span子元素，然后span的样式：

span{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}

在这里主要说一种更简单的方法：

div{ display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>)

vertical-align:middle; //垂直居中

text-align:center;} //水平居中

子元素图片不用设置任何属性

二：利用定位实现元素的垂直居中

结构：

</div>

CSS样式：

.box{width:200px;height:200px;position: relative;border:1px solid #ddd;} img{position: absolute;left:50px;top:50px;}

这个方法的缺点：需要知道父盒子和图片的宽度和高度，若不知道width和height还可以用javascript获取，然后用js使图片垂直水平居中

($(“.box”).width()-$("img").width())/2+"px" // 水平

($(“.box”).height()-$("img").height())/2+"px" // 垂直

以上只是个人在工作中总结的小经验，如有问题或更好的方法，欢迎大家给我留言。