程序博客网 > 淘宝宝贝标题范文

垂直居中的几种方式

来源：互联网发布：淘宝宝贝标题范文编辑：程序博客网时间：2024/06/01 10:03

垂直居中的几种方式

1.ie7+以上支持

绝对定位+各外边距为0+margin：auto

<!doctype html><html lang="en"> <head>  <style>  .div1{  background:blue;  position:absolute;  left:0;  top:0;  right:0;  bottom:0;  height:100px;  width:100px;  margin:auto;  }  </style> </head> <body>  <div class = "div1">fsdaf</div> </body></html>

2. 支持ie6和其他浏览器（需要知道高度）

绝对定位+自身高度的一半

  <style>  div{  background:green;  height:100px;  width:120px;  position:absolute;  top:50%;  left:50%;  margin:-50px -60px;/*自身高度和宽度的一半*/  }  </style> </head> <body>  <div>fsdaf</div> </body>

3.自适应高度，支持ie6和其他浏览器

父级绝对定位+本身相对定位、inline-block、-50%；

</pre><pre name="code" class="html">  <style>  .infoBox{  position:absolute;  top:50%;  width:100%;  text-align:center;  }  .info{  display:inline-block;  position:relative;  top:-50%;  right:0;  border:1px solid;  }  </style> </head> <body>  <div class = "infoBox">    <div class = "info">     fsdafdfsg fdgfd</div>  </div> </body>

0 0

淘宝宝贝标题范文

淘宝宝贝标题范文

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子苹果5s丢失怎么办备案证过期了怎么办开发商逾期交房怎么办卫生间防水漏了怎么办淋浴房缝隙漏水怎么办淋浴房下面漏水怎么办楼上防水没做好怎么办阳台没有做防水怎么办平房顶裂缝漏水怎么办投标保证金不退怎么办怀孕喝咖啡了怎么办怀孕期间老是便秘怎么办孕妇喝了咖啡怎么办干咳咳不出来怎么办咳嗽咳不出来怎么办手机开机没反应怎么办企业年金离职后怎么办辞职后企业年金怎么办未来农村老房子怎么办房价太高老百姓怎么办联通混改临时工怎么办插头是圆柱形的怎么办被直销骗了怎么办 u盘格式化写保护怎么办 u盘无法格式化怎么办? qq忘了密码怎么办行李箱密码坏了怎么办 wifi忘了密码怎么办皮箱密码锁忘了怎么办皮箱密码忘了怎么办行李箱密码忘了怎么办? 手提箱密码忘了怎么办箱子密码忘记了怎么办支付功能被关闭怎么办竞争性谈判流标怎么办发票忘记作废,税怎么办土地使用证丢了怎么办电话被标记诈骗怎么办天刀玩起来很卡怎么办花肥是什么吃了怎么办花肥是去根部怎么办