雨夜带刀

<p>对于DOM对象的innerHTML属性想必大家都不会陌生，但是outerHTML用起来相对于会少一点了，innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML，而outerHTML属性返回的是包括DOM对象本身标签在内的HTML，下图能很好的解释两个属性的区别：</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2011/02/outerhtml_demo.png" alt="innerHTML和outerHTML的区别"></div>
<p>outerHTML最开始是属于IE的私有属性，可以查看MSDN上的说明：<a href="http://msdn.microsoft.com/en-us/library/ms534310%28VS.85%29.aspx" target="_blank">outerHTML Property</a>。目前IE、Chrome、Safari、Opera都能支持这个属性，杯具的是outerHTML不支持Firefox，在Firefox中该属性永远返回undefined。</p>
<p>让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现…</p>

<p>图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>