处理元素垂直居中的方法总结

相信大多数做前端的朋友都不可避免地会遇到这个问题：处理元素垂直居中。那么有哪些方法可以实现呢？我们怎样做取舍？

 

大体上实现的途径可以分为两类：设置父元素和设置子元素；

 

第一类：设置父元素的方法：

 一：【使用line-height】:

同时定义height和line-height是比较常用的方法，通常在处理按钮文字居中的时候用这个比较。要注意的是这种方法只对内容和行内元素有效；也就是说如果子元素是div，你就要考虑一下是不是要用这个方法了；

 比如下面的情形：

 

 html代码：

    <DIV id="box" class="center-vertical">
        <div class="littlebox">居中很简单</div>
    </DIV>

css代码：

    #box 
    {
        width: 300px;
        height: 200px;
        text-align:center;
        border:1px solid red;
        margin: 20% auto;
    }
    
    .littlebox 
    {
        width:80px;
        height: 80px;
        border: 1px solid blue;
        margin: 0 auto;
    }
    .center-vertical 
    {
        line-height: 200px;
    }

明显line-height对里面的div没有起到效果。如果非要这么做，给littlebox添加一条属性：display:inline;即可。但是还是那句话你首先考虑该不该用这种方法了。

 二：【修改display属性】：

有时候通过修改父元素的display属性也可以实现垂直居中；以下是对vertical-center样式的修改:

    .center-vertical 
    {
        display: flex;
        align-items: center;
    }

这样相当把父元素变成一个可伸缩的盒子。

 当然还可以将display设置为table-cell，相当于把div当作一个td去显示，但是这么做对布局的影响可能比较大哦。

    .center-vertical 
    {
    /*
        display: flex;
        align-items: center;
    */
        display: table-cell;
        vertical-align: middle;
    }

建议使用table-cell的时候考虑到整理的布局，不要只改动子元素;可以将父元素的display属性设置为:table

第二类：设置子元素属性

一：【vertical-align属性】：

很不幸的是，使用vertical-align有一定的局限性，那就是元素本身要是行内元素或修改display属性为inline或inline-block。因为vertical-align受行高的影响，它的默认值是baseline，baseline就是文本的基线。

除此之外，vertical-align通常要配合父元素line-height才可以达到比较好的居中效果，line-height的值比vertical-align略小。

【我的理解】

有许多朋友会说：我设置了vertical-align但没有效果。原因可能是：1、不符合前面所说行内元素；2、非行内元素下也没有改变display属性为inline或inline-block；3、没有可参照的baseline;4、父元素的line-height没有设置或设置不当。

请看下面的例子：

 

html&css代码：

    <DIV id="box">
        <div class="littlebox center-vertical" style="display:none;">    </div>&nbsp;
        <span ><img class="center-vertical" src="image/thumb.jpg"/>&nbsp;</span>
    </DIV>

    .center-vertical 
    {
    /*
        display: flex;
        align-items: center;
        display: table-cell;
    */
        vertical-align: middle;
    
    }

    #box 
    {
        width: 400px;
        height: 250px;
        text-align:center;
        border:1px solid red;
        margin: 20% auto;
        line-height: 250px;
    }
    

父元素idi=box设置了line-height；其实这里要略小于250px才能达到更好的居中效果，可以自己去调；大家注意到了没？这里为什么要加 为的就是提供baseline的参考，如果去掉试试？^^

 

二：【巧用百分比】：

 百分比也可以用来居中，这个比较好理解。当元素处于绝对定位时；你会发现什么text-align、vertical-align都不起效果；为了描述问题，我们把子元素换成了一个div，同时把图片当作背景去显示；

    <DIV id="box">
        <div class="littlebox center-vertical"><div>
    </DIV>

 子元素css修改：

    .littlebox 
    {
        width:100px;
        height: 112px;
        margin: 0 auto;
        background: url("image/thumb.jpg") no-repeat center center;
        position: absolute;
    }

 父元素样式修改

    #box 
    {
        width: 400px;
        height: 250px;
        border:1px solid red;
        margin: 20% auto;
        position: relative;
    }

 此时子元素相对于box的绝对定位状态，要实现垂直居中效果只要修改center-vertical如下：

    .center-vertical 
    {
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -56px;
    }

margin-left和margin-top分别是宽度和高度的一半；

当然子元素的高度也是百分比，那就更简单了！设置方法是：

top = (100 - height) / 2;

设置margin-left和margin-top是比较常见的方法，前几天在网上看到也有人使用transform，比较少见，同时transform是css3属性，对于低版本的IE(<9)是不支持的。

    .center-vertical 
    {
        left: 50%;
        top: 50%;
        transform: translate(-50px, -56px);
    }

 三：【再谈margin】：

我们知道margin: 0 auto;可以实现水平居中；我当初还很纳闷为什么就没有margin: auto实现垂直居中呢？

就在前不久才发现margin:auto也能:

    .absolute-center {  
      margin: auto;  
      position: absolute;  
      top: 0; left: 0; bottom: 0; right: 0;  
    }  

margin后面接一个参数表示四个边都是一样的计算方法，auto表示由浏览器自动计算；下面两句可以使元素四周被margin区域撑开；

这个方法可以用于实现类似相框的效果：

 

    <div class="outerBox" style="background: #ccc;">
        <div style="width: 290px; height: 290px;background: #ddd;" class="absolute-center">
            <div style="width: 280px; height: 280px;background: #eee;" class="absolute-center" >
                <div style="width: 270px; height: 270px;" class="absolute-center bg" ></div>
            </div>
        </div>
    </div>