水准垂直居中,假如了解原素的总宽,则可使用
.cell{width:300px; margin:0 auto; text-align:center;} 假如是内联原素垂直居中,那麼立即用text-align:center则行 假如不明原素总宽,而且非内联原素,那麼下边得出的几类计划方案也合适你。 第一种:相对性精准定位法 基本原理是父类波动的同时向左left:50%,而子类则向左波动的同时left:50%;style type= text/css .centerlist {position:relative;left:50%;float:left;} .centerlist li {position:relative;right:50%; z-index:2;float:left} /style ul > 第二种:强制性内联// style type= text/css .centerlist_inline{text-align: center;} .centerlist_inline li{display: inline;} /style ul > 局限性:块级原素改成内联原素,那麼高宽比、总宽、margin-top,margin-bottom, padding-top,padding-bottom,等也不可用。 第三种: 应用inline-block 假如大伙儿看了我以前写的inline-block更换float将会便会清晰这一特性的益处了。style type= text/css .centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;} .centerlist_inline-block li{display: inline-block; *display: inline; *zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;} /style li a href= lorem1 /a /li li a href= lorem1 /a /li li a href= lorem1 /a /li li a href= lorem1 /a /li /ul第四种:table-cellstyle type= text/css .centerlist_table-cell{display:table; margin:0 auto;} .centerlist_table-cell{display:table-cell;} /style ul > 缺陷不是适配ie6,ie7 强烈推荐应用inline-block这类的方式,既保存了块级原素特点,并且极致适配。便是编码有点儿多。此外你要可使用报表的方法井水平垂直居中。 讲完了水准垂直居中,下边说竖直垂直居中。 假如原素是内联原素,而且仅有一行,则大家能够根据line-height来设定两者之间高宽比一样尺寸,则完成了竖直垂直居中了。