未知宽高div水平垂直居中3种方法_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:55:42
原创
1312人浏览过

<!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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1579">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680266325758.png" alt="无涯·问知">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1579">无涯·问知</a>
                            <p>无涯·问知,是一款基于星环大模型底座,结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="无涯·问知">
                                <span>40</span>
                            </div>
                        </div>
                        <a href="/ai/1579" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="无涯·问知">
                        </a>
                    </div>
                		<p>正进行微信开发的开发团队(开发者)、有兴趣或即将投身于微信开发的开发者、		想开发相关微信应用正努力寻找微信开发团队的传统IT企业,该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。		</p>		<p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。		</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</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>
登录后复制

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号