CSS完美解决垂直居中问题

最新推荐文章于 2024-06-17 16:16:53 发布

Monarch_lin

最新推荐文章于 2024-06-17 16:16:53 发布

阅读量926

点赞数

分类专栏： CSS 文章标签： html web前端

本文链接：https://blog.csdn.net/Monarch_lin/article/details/23965385

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在写页面时候，因为要适应不同分辨率的屏幕。在放大和缩小的情况下，视图都处于居中状态，这就要设置左右垂直居中。

通常情况下我会用绝对定位来设置垂直居中，但是有个缺点就是高度变小的时候会把内容截取掉。

以下是比较兼容的一种方法。

<!DOCTYPE html>
<html>
 <head>
  <title>css test</title>
  <meta charset="utf-8"/>
  <style>
  /*
   * 原理： middle层对于outer层设置top：50%，middle层在outer层中间以下部分，然后inner层相对定位-50%，则向上移动             *50%。inner层就会居中。
   *
  */

   .outer{
    height: 400px;
    width: 200px;
    background: #eee;
    display: table;/*不支持IE6、7*/
   }
   .middle{ /*不设置高度则与inner高度一致*/
    display: table-cell;
    vertical-align: middle; /*设置垂直*/
   }
   /*===分开写方便理解=======兼容方案hack*/
   .outer{
    *position: relative;
   }
   .middle{
    *position: absolute;
    *top:50%;
   }
   .inner{
    *position: relative;
    *top: -50%;
   }
  </style>
 </head>
 <body>
   <div class="outer">
    <div class="middle">
     <div class="inner">需要垂直的内容</div>
    </div>
   </div>
 </body>
</html>