css实现元素居中效果

法一

html

<div>
    <img>
</div>

css

div { display: table-cell; vertical-align: middle }

将 div 看做一个 table 的表格 td

参考文档

http://www.cnblogs.com/sese/p/5941389.html

法一延伸 未整理

<td><img></td>

法二

html

<div>
    <span></span>
    <img>
</div>

css

div { height: 200px; }
div span { line-height: 200px; }
div img { vertical-align: middle; }

利用 vertical-align 属性的定义，设置元素的垂直对齐方式

法二延伸 未整理

<div><p><img></p></div>

法三

html

<div>
    <img>
</div>

css

div { display: flex; align-items: center; }
img { flex-grow: 0; }

利用 flex 布局 的居中效果