垂直居中的几种方式

最新推荐文章于 2021-12-12 23:09:54 发布

SunshinePengChao

最新推荐文章于 2021-12-12 23:09:54 发布

阅读量524

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/SunshinePengChao/article/details/44197577

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

垂直居中的几种方式

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>