未知宽高div水平垂直居中3种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!--方法1：一个未知宽高的弹出框，水平垂直居中-->
<div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1
<div class="modal">
<div class="modal-header">弹出窗标题</div>
<div class="modal-body">
微信开发人员大会（北京）的成功举办，引起业界的极大关注。
应广大微信开发人员的强列要求。深圳微信开发人员大会也在如火如荼的筹备中。
本文总结了技术团队不应错过2014年深圳微信开发人员大会的十个理由
</div>
</div>
</div>
<style type="text/css">
.modal-header {
padding: 10px 20px;
background: rgba(0,0,0,.25);
color:#fff;
}
.modal-body{
padding: 20px;
background: #fff;
}
.modal {
border: 1px solid #888;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,.5);
/**主要代码*/
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<!--方法1 end-->
<!--方法2 parent-panel内的元素水平垂直居中-->
<div class="parent-panel">方法2
<div class="middle-panel">
<p>深圳站依然秉承“演讲从实践出发、听众从中受益”的原则。
在保持北京站特色之余，针对微信开发的新情况又一次设置了议程，内容源于实践又富于启示性。
</p>
<p>正进行微信开发的开发团队（开发人员）、有兴趣或即将投身于微信开发的开发人员、
想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。
</p>
<p>假设你还在犹豫。能够细致阅读一下主办方总结的技术团队不应错过2014年微信开发人员大会深圳站的十个理由。
</p>
</div>
</div>
<style type="text/css">
.middle-panel{
width:500px;
border:1px solid #888;
}
.parent-panel{
width:100%;
height:400px;
border:1px solid #888;
/**主要代码*/
display: flex;
align-items: center;
justify-content: center;
}
</style>
<!--方法2 end-->
<!--方法3 parent-panel2内的元素垂直居中-->
<div class="parent-panel2">方法3
<div class="middle-panel2">
<p>深圳站依然秉承“演讲从实践出发、听众从中受益”的原则。
在保持北京站特色之余，针对微信开发的新情况又一次设置了议程，内容源于实践又富于启示性。
</p>
<p>假设你还在犹豫，能够细致阅读一下主办方总结的技术团队不应错过2014年微信开发人员大会深圳站的十个理由。
</p>
</div>
</div>
<style type="text/css">
.middle-panel2{
width:500px;
border:1px solid #888;
display:inline-block;
vertical-align: middle;
}
.parent-panel2{
width:100%;
height:400px;
border:1px solid #888;
}
.parent-panel2:after{
/**主要代码*/
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
}
</style>
<!--方法3 end-->
</body>
</html>
