全面总结使用CSS实现水平垂直居中效果的方法

    <div class="modal-body">在当今天移动。。。</div>  

</div>  

结构不分析了。直接看CSS:

CSS Code复制内容到剪贴板

*{   

  margin: 0;   

  padding:0;   

  -webkit-box-sizing: border-box;   

  box-sizing: border-box;   

}   

html,   

body {   

  height: 100%;   

}   

.modal {   

  border: 1px solid #bbb;   

  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%);   

}   

.modal-header {   

  padding: 10px 20px;   

  background: rgba(0,0,0,.25);   

  color:#fff;   

}   

.modal-body{   

  padding: 20px;   

  background: #fff;   

}  

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!