元素水準垂直居中的css3實作

話不多說，代碼如下

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;伸縮布局&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>*{</code>

<code>  </code><code>margin: 0;</code>

<code>  </code><code>padding:0;</code>

<code>  </code><code>-webkit-box-sizing: border-box;</code>

<code>  </code><code>box-sizing: border-box;</code>

<code>}</code>

<code>html,</code>

<code>body {</code>

<code>  </code><code>height: 100%;</code>

<code>div{</code>

<code>    </code><code>height: 100px;</code>

<code>    </code><code>width: 100px;</code>

<code>    </code><code>overflow: hidden;</code>

<code>     </code><code>display:flex;</code>

<code>     </code><code>border: 1px dotted red;</code>

<code>  </code><code>align-items: center;</code>

<code>  </code><code>justify-content:center;</code>

<code>img{</code>

<code>    </code><code>width: 50px;</code>

<code>    </code><code>height: 50px;</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"http://img.mukewang.com/5365d7b10001e8d506350529.jpg"</code> <code>alt</code><code>=</code><code>""</code> <code>/&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

則圖檔居中

本文轉自  陳小龍哈   51CTO部落格，原文連結:http://blog.51cto.com/chenxiaolong/1710761