更新时间：2015年10月21日

DIV未知高度的垂直居中代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</title>
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
	</style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
	var i,t='',el = document.getElementById(name);
	if (!el.origCont) el.origCont = el.innerHTML;
	
	for (i=0;i<n;i++) t += el.origCont;
	el.innerHTML = t;
	}

// ]]>
</script>
</head>
<body>
<div id="outer">
  <div id="middle">
    <div id="inner" class="greenBorder">
      <p><a href="javascript:toggleContent('inner',1)">默认长度</a>  <a href="javascript:toggleContent('inner',2)">加长页面</a></p>
      <p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 <br />
        1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。</p>
      <address style="text-align:center; padding: .5em; clear: left;">
      Design by <a href="http://www.forest53.com">Forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。
      </address></div>

</div>
						<br>
						<div class="clear blank10"></div>
						上一篇： <a href="/thread-3686-1.html" title="屏蔽鼠标右键代码">屏蔽鼠标右键代码</a><br>
						下一篇：<a href="/thread-3688-1.html" title="同步文本框内容的JS代码">同步文本框内容的JS代码</a>
						<div class="clear"></div>
					</div>
				</div>
			</div>
        </div>
    </div>

<div class="footer wow animated fadeInUp">
    <div class="mainbox container clearfix">
        <div class="foot_l fl">
            <i class="title">联系我们</i>
            <div class="footer_address">长沙高新开发区像素大厦(上门请先电话预约)</div>
            <em class="foooter_phone">0731-84469346/15274839229</em>
            <span class="sm-hide">0731-84469346</span>

<p class="mld" >用心打造长沙网站制作优秀品牌，用心服务 <br>携手共赢！</p>
          <P class="mld">在线QQ技术服务中心：  点击对话
			  <a 
target=blank href=tencent://message/?uin=273039264&Site=龙帝网络科技&Menu=yes  ><font class="red">273039264</font></a> 
<a target=blank href=tencent://message/?uin=95018369&Site=龙帝网络科技&Menu=yes ><font class="red">95018369</font></a> 
<a target=blank href=tencent://message/?uin=975371319&Site=龙帝网络科技&Menu=yes ><font class="red">975371319</font></a></p>
        </div>
        <div class="foot_c fl">
            <div class="title">信息导航</div>
            <div class="aboutlist">
 <a href="http://www.ld99.cn/list-1689.html" target="_blank">经典案例</a>
 <a href="http://www.ld99.cn/list-1692.html" target="_blank">新闻动态</a>
 <a href="http://www.ld99.cn/list-1690.html" target="_blank">公司简介</a>
 <a href="http://www.ld99.cn/list-1690.html#wh" target="_blank">企业文化</a>            
 <a href="http://www.ld99.cn/list-1690.html#zp" target="_blank">加入我们</a>
 <a href="http://www.ld99.cn/list-1691.html" target="_blank">联系我们</a>
            </div>
        </div>
        <div class="foot_r fr">
            <div class="title">关注公众号</div>
            <div class="aboutlist"><img src="/ld/images/weixi.jpg"></div>
        </div>
    </div>
    <div class="mainbox container copyright clearfix">
       
        <span class="span_l fl" >Copyright ©2023 长沙龙帝网络科技有限公司 版权所有   <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023008034号</a>
 <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=43019002001179" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://kj.zhzszq.com/i.png" style="float:left;"/> 湘公网安备 
43019002001180号</a>
</span>

<span class="span_r fr"><a href="http://www.ld99.cn">长沙网站设计</a> | <a href="http://www.ld99.cn">长沙手机网站建设</a> | <a href="http://www.ld99.cn">长沙网站优化</a> |  <a href="
http://www.ld99.cn">长沙网站备案</a> <a href="http://www.ld99.cn">长沙做网站的公司</a></span>
    </div>
</div>

<script src='/js/jquery.js'></script>
<script src="/js/index.js"></script>
<script type="text/javascript" src="/ld/js/script.js"></script>

}
pageAnimate('.page-animate');

//设置选中
	(function($a) {

var href = location.href,
        target;
    if (location.search != '') {
        href = href.split(location.search)[0]
    }
    
    for (var i = 0; i < $a.length; i++) {
        var thisHref = $a[i].href;
        if (thisHref == href) {
            target = $a[i];
            break;
        };

}

var $li = $(target).parent(),
        $menu = $(target).parents('.dropdown-menu');
    if ($menu.length != 0) {

$li = $menu.parent()

}

$li.addClass('active').siblings().removeClass('active');

})($('.nav-box').find('a'));

</script>
<script>
    function relyLoadedCallBackInPage(){
  $('.page-timer').each(count);
      $('.case-tab').find('li').eq('0').addClass('curr').siblings().removeClass('curr')
      $('.case-box').find('.case-welcome').each(function () {
         var _value = $(this).attr('data-base'); 
        if(_value == 0){
            $(this).removeAttr("href");
            $(this).hide()
        }
    })
    $('.case-right a').click(function(){
            $('#qidian_wpa_2852156247_26').contents().find('.btn-area').click()
        })
    var mySwiper =  new Swiper('.swiper-container', {
       
        slidesPerView: 6,
        paginationClickable: true,
        spaceBetween: 15,
         breakpoints: {
            //宽度小于1024的时候
            768: {
                slidesPerView: 4,
                spaceBetween: 10
            },
       
        }

});
}
</script>
</body>
</html>