CSS - 实现图片垂直居中，文字垂直居中

2015-09-26 发布：hangge 阅读：6504

在html页面设计时，经常需要让容器内部的图片或文字上下垂直居中，通过CSS可以很方便的进行设置。

1，图片垂直居中

给图片添加 vertical-align:middle; 样式即可

<div style="height:100px">
    <img style="vertical-align:middle" src="images/star.png" >
</div>

如果按上面设置还是无法居中，试试下面代码：

<div style="height:100px">
    <span style="height:100%;display:inline-block;vertical-align:middle"></span>
    <img style="vertical-align:middle" src="images/star.png" >
</div>

2，文字垂直居中

要把文字外部容器的 line-height 和 height 设置成一样

<div style="height:100px;line-height:100px">
    欢迎来到hangge.com
</div>