Home >Web Front-end >HTML Tutorial >3 ways to center divs with unknown width and height horizontally and vertically_html/css_WEB-ITnose
3 ways to center divs with unknown width and height horizontally and vertically_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:421257browse
<!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> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn