CSS水准垂直居中的四种方式

2021-02-21 08:58 admin

水准垂直居中,假如了解原素的总宽,则可使用

.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-cell

 style 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来设定两者之间高宽比一样尺寸,则完成了竖直垂直居中了。