loading...

0

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

css读完大概需要5分钟

  • 发布时间:2017-08-05 11:07 星期六
  • 刘伟波
  • 173
  • 更新于2017-08-05 11:07 星期六

1.<style>

    * {
margin: 0;
padding: 0;
}

.box {
width: 100%;
height: 400px;
text-align: center;
background: #eaeaea;
}

.box:after {
content: '';
display: inline-block;
width: 100px;
height: 100%;
vertical-align: middle;
}

.box div {
background: #ccc;
vertical-align: middle;
display: inline-block;
}

</style>
<div class="box">
<div>
    <p>ASDEWQ</p>
    <p>ASDEWQ</p>
    <p>ASDEWQ</p>
    <p>ASDEWQ</p>
  
</div>
</div>

2.

  1. <div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1  
  2.     <div class="modal">  
  3.         <div class="modal-header">弹出窗标题</div>  
  4.         <div class="modal-body">  
  5.             微信开发者大会(北京)的成功举办,引起业界的极大关注。  
  6.             应广大微信开发者的强列要求,深圳微信开发者大会也在如火如荼的筹备中。  
  7.             本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由      
  8.         </div>  
  9.     </div>  
  10. </div>  


  1. <style type="text/css">  
  2. .modal-header {  
  3.   padding: 10px 20px;  
  4.   background: rgba(0,0,0,.25);  
  5.   color:#fff;  
  6. }  
  7. .modal-body{  
  8.   padding: 20px;  
  9.   background: #fff;  
  10. }  
  11. .modal {  
  12.   border: 1px solid #888;  
  13.   border-radius: 5px;  
  14.   box-shadow: 0 0 3px rgba(0,0,0,.5);  
  15.   /**主要代码*/  
  16.   position:absolute;  
  17.   top:50%;  
  18.   left: 50%;  
  19.   -webkit-transform: translate(-50%, -50%);  
  20.   transform: translate(-50%, -50%);  
  21. }  
  22. </style>  


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!