where interesting happend !

垂直居中的实现方法

jimmy

一般情况下,我们页面垂直居中的情况一般包括以下几种:

  1. 高度一定的弹出框 ,我们常用的登录框,提示框等
  2. 高度未知,但是知道百分比
  3. 高度完全未知

1.高度一定

最常见的是一种,实现方法也比较简单。我个人一般是这么写的,分两种情况,1.有遮罩层,2,没有遮罩层。

第一种情况:
  1. 最外围添加一个绝对样式属性fixed,作为遮罩层,设置size满屏。
  2. 弹出框,设置固定宽高(w,h)、absolute位置属性,以及top:50%,left:50%,margin-top:-h,margin-left:-w。
  3. 具体代码如下:
    html:

    1
    2
    3
    4
    5
    6
     <body>
    <h2>什么什么巴拉巴拉,这个是背后的文字,但是被遮住了</h2>
    <div class="aa">
    <div class="login-box">登录框</div>
    </div>
    </body>

css:

<style>
.aa{

       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background:rgba(0,0,0,.6);
   }
   .login-box{  
    height: 300px;
    width: 450px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -225px;
    text-align: center; 
   }
</style>  

效果如下:

image

#####第二种情况:
不需要遮罩层的,一般直接去掉最外面的aa,然后login-box的位置属性设置成fixed即可。

2.高度为百分比

这个情况,比较简单,设置好login-box的基本属性后,只要将top设置成(100%-height)/2 的值,相应的设置left为(100%-width)/2的值。

3.高度不定

这个要重点讲下,主要用到了display:tablevertical-align:middle。看代码:
html:

 <div class="wrapper">  
    <div class="content">   
        <div class="main">   
            <span>123123</span>
            <div>居中内容</div>
            <span>123123</span>
            <div>居中内容</div>
            <span>123123</span>
            <div>居中内容</div>
            <span>123123</span>
            <div>居中内容</div>
        </div>
    </div>
</div>  

css:

 <style>
body{
    margin:0;
}
.wrapper{
       height: 700px;
       background:rgba(0,0,0,.6);
       display: table;
       width: 100%;
   }
   .content{
       display: table-cell;
       vertical-align: middle;

   }
   .main{
       width: 50%;
       margin:0 auto;
       background-color: #fff;
   }
</style>  

效果图:
image
关键的属性有两个,display:table (table-cell)、vertical-align:middle。根据W3的解释,display:table 的意思是:

此元素会作为块级表格来显示,前后带有换行符。

display:table-cell:

此元素会作为一个表格单元格显示,类似 td 和 th.

表格的样式就是默认垂直居中的,只不过为我们要添加vertical-align:middle才能实现。

Comments

Proudly published with Hexo