未知宽高div水平垂直居中3种方法
2014-10-25 13:46
239 查看
<!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>
相关文章推荐
- 未知宽高div水平垂直居中3种方法
- 未知宽高div水平垂直居中3种方法,div水平居中3种
- 未知高度的div在父元素中水平垂直居中的方法
- 未知宽高元素水平垂直居中方法
- CSS-几种未知长宽的垂直水平居中方法
- 未知宽高元素水平垂直居中方法
- 未知图片大小的自动水平和垂直居中方法
- 未知div宽度高度使div水平垂直居中(弹性盒子方法)
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
- 未知宽高的图片水平垂直居中的几种方法
- div水平居中垂直居中方法
- 未知大小图片在容器的垂直和水平居中问题
- div垂直水平自适应居中解决方法
- 大小不固定的图片、多行文字的水平垂直居中实现方法
- 未知大小的图片水平垂直居中以及连续字符串的自动换行
- css水平与垂直居中的方法,普通应用各浏览器基本有效
- CSS解决未知高度垂直居中方法
- 在DIV中图片垂直、水平居中(最简单方法)
- 未知尺寸图片在已知尺寸容器下的水平垂直居中
- 未知大小图片在容器的垂直和水平居中问题