《黑马程序员ui教程divcss垂直居中的方法》由会员分享，可在线阅读，更多相关《黑马程序员ui教程divcss垂直居中的方法（5页珍藏版）》请在金锄头文库上搜索。
1、传智播客UI设计学院http:/方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。1 div#wrapper 2 display: table;3 width: 500px;4 height: 500px;5 background-color: #c00;6 7 div#row 8 display: table-row;9 10 div#cell 11 display: table-cell;12 vertical-align: middle;13 1415 16 17 18 内容 19 20 21 优点：不用受内容高度的限制，简单实现垂直
2、居中；缺点：不兼容ie6,7方法二：这个方法使用绝对定位的 div，把它的 top 设置为 50，margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。1 div#wrapper 2 position: relative;3 width: 500px;4 height: 500px;5 background-color: #c00;6 7 div#content 8 position: absolute;9 top: 50%;10 left: 0;11 width: 400px;12 height: 300px;13 margin-top: -1
3、50px;14 background-color: pink;15 1617 18 19 优点：兼容性好缺点：必须知道内容盒子的高度才可以，有了这点限制方法三：这个方法和方法二的原理是一样的1 .wrap 2 height: 500px;3 width: 500px;4 background-color: pink;5 6 .additional 7 height: 50%;8 margin-bottom: -120px;9 10 #content 11 height:240px;12 width:70%;13 background-color: #000;14 1516 17 18 19 方
4、法四：这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;1 #content 2 position:absolute;3 top:0;4 bottom:0;5 left:0;6 right:0;7 margin:auto;8 height:240px;9 width:70%;10 background-color: #000;11 1213 内容1111111111111111111111111111111111
