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

方法一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

 <style>  
.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>
</head>
<body>
   <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>      
</body>
</html>

　　

 

方法二：

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

 <style>  

.parent-panel{  
    width:100%;  
    height:400px;  
    border:1px solid #888;  
      
    /**主要代码*/  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

      .middle-panel{  
    width:500px;  
    border:1px solid #888;  
}  

</style>
</head>
<body>
   <div class="parent-panel">方法2  
    <div class="middle-panel">  
        <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，  
        在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。  
        </p>  
        <p>正进行微信开发的开发团队（开发者）、有兴趣或即将投身于微信开发的开发者、  
        想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。  
        </p>  
        <p>如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。  
        </p>  
    </div>  
</div>       
</body>
</html>

　　

方法三 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

 <style>  

.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>
</head>
<body>
 <div class="parent-panel2">方法3  
    <div class="middle-panel2">  
        <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，  
        在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。  
        </p>  
        <p>如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。  
        </p>  
    </div>  
</div>  
</div>       
</body>
</html>

　　

 

posted @ 2018-04-18 21:36  黑发不知勤学早  阅读(542)  评论(0)  编辑  收藏  举报