未知宽高div水平垂直居中3种方法

最新推荐文章于 2023-03-21 11:02:24 发布

Abel-lin

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量1.3w

点赞数

分类专栏： web前端文章标签：居中垂直

本文链接：https://blog.csdn.net/rongku/article/details/40452231

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>