全面总结使用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;   

}  

方法四：div
使用div模拟表格效果，也就是说将多个<div>的“display”属性设置为禾“table”和“table-cell”，并设置他们的“vertical-align”的属性值为“middle”。
HTML Code

XML/HTML Code复制内容到剪贴板

<div id="container">  

 <div id="content">content</div>  

</div>  

CSS Code

CSS Code复制内容到剪贴板

#container {   

 height: 300px;   

 display: table;/*让元素以表格形式渲染*/  

}   

#content {   

 display:table-cell;/*让元素以表格的单元素格形式渲染*/  

 vertical-align: middle;/*使用元素的垂直对齐*/  

}     

优点：

这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点：

不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行；而且较前两者而言，结构也更复杂。

（编辑：焦作站长网）

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