定位实现居中（需要计算偏移值）前提：你必须知道要居中的元素的宽度和高度。way3{位置：相对；宽度：250px；高度：250px;}.way3img{宽度：200px;高度：140px；位置：绝对；左：50%；顶部：50%；左边距：-100px；margin-top:-70px;}这种方式的好处是不需要知道元素的宽高，浏览器的兼容性好。.way4{位置：相对；宽度：250px；height:250px;}.way4img{position:absolute;左：0；顶部：0；右：0；底部：0；margin:auto;}用css3新属性transform:translate(x,y)定位的好处是不需要知道元素的宽高，更多用在移动端，因为移动端对新的CSS3属性有更好的兼容性。.way5{位置：相对；宽度：250px；height:250px;}.way5img{position:absolute;左：50%；顶部：50%；-webkit-transform:翻译(-50%,-50%);-moz-transform:翻译(-50%,-50%);-o-转换：翻译（-50%，-50%）；-ms-transform:翻译(-50%,-50%);transform:translate(-50%,-50%);}新的css3属性calc()配合定位（需要知道元素的宽高）动态计算长度值。需要注意的是运算符前后需要保留一个空格，例如：width:calc(100%-10px);可以使用calc()函数计算任何长度值；calc()函数支持“+”、“-”、“*”、“/”操作；calc()函数使用标准的数学运算优先规则；.way6{位置：相对；宽度：250px；高度：250px;}.way6img{宽度：200px;高度：140px；位置：绝对；左：计算（50%-100px）；top:calc(50%-70px);}jquery实现水平和垂直居中jquery实现水平和垂直剧中的原理是通过jquery设置di??v的css得到div的left和uppermargin偏移量，margin偏移的算法是用页面窗口的宽度减去div的宽度，然后将得到的值除以2，左偏移和右偏移的算法是一样的。注意div的css设置要在resize()方法中进行，即每次改变窗口大小，都要执行div的css设置。代码如下：$(function(){$(window).resize(function(){$('.mydiv').css({position:'absolute',left:($(window).width()-$('.mydiv').outerWidth())/2,顶部:($(window).height()-$('.mydiv').outerHeight())/2});});})这种方法的好处是不需要知道div的具体宽高，直接用jquery实现水平垂直居中即可，兼容各种浏览器。许多弹出层效果中都使用了这种方法。使用elasticlayoutflexcentering使用flexcentering不需要知道元素本身的宽高和元素的属性。.way7{宽度：250px；高度：250px；显示：弹性；justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/}usedisplay:table-cell;display:table-cell和vertical-align,text-align，将父元素中的所有内联元素水平和垂直居中（只需为内部div设置display:inline-block）。这在子元素的宽高和个数不确定的时候特别有用！.way8{显示：表格单元格；宽度：250px；高度：250px；文本对齐：居中；垂直对齐：中间；float:none;}.way8img{display:inline-block;}特别提醒：1.table-cell不感知margin，在父元素上设置table-row等属性也会使其不感知高度。2.设置float或者position会破坏默认布局，可以考虑添加父div来定义float等属性。