CSS垂直居中技巧-优快云博客

方案一：line-height

适用于单行文本，
居中前：
这里写图片描述

<div class="vertical">居中元素</div>

.vertical {
            height: 100px;
            line-height:100px;
            border: 1px solid red;
        }

居中后：
这里写图片描述

说明：这种对于单行的文本很有效果
适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。

这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。

    <div class="vertical">
        <p> 居中元素</p>
        <p>另一个文本呢</p>
    </div>

效果极差
这里写图片描述
因为line-height是行高，所以每行之间的间距就是100px;

方案二：设置绝对定位，高度(top)和margin-top为高度的一半

    <div class="container">
        <div class="vertical">
            居中元素
        </div>
    </div>

/---css-------/
        .container {
            position: relative;
            border: 1px solid blue;
            height: 200px;
        }

        .vertical {
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            border: 1px solid red;
        }

这里写图片描述

实现了中间那个红框元素的居中

优点：在各大浏览器都能适用；
缺点: 基于绝对定位来的，一定要把握住父元素是谁

另外此方法是通过绝对定位来实现的，那么用这种方法实现元素的垂直居中需要注意以下几点：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；另外需要设置给元素明确定一个高度值并且给元素设置一个负值的margin-top，而且值为元素高度的一半。

这里我建议大家给元素定一个宽度值，因为元素进行绝对定位后脱离文档流，其宽度是根据元素内容所占宽度来计算的（不是100％），为这能让其视觉效果更好，最好给元素定义一个宽度值。

方案三：利用table-cell实现垂直居中

使用div模拟表格布局

        .container {
            position: relative;
            border: 1px solid blue;
            height: 200px;
            display: table;
        }

        .vertical {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid red;
        }

html

    <div class="container">
        <div class="vertical">
            居中元素
        </div>
    </div>

这里写图片描述

优点：此方法没有高度限制，不会出现滚动条等问题；
缺点：
不兼容ie6 ie7；
因为display:table在IE6-7中不被支持

方案四：在居中元素前加一个空的浮动元素

这个浮动元素的高度设置为容器的一半；margin-bottom设置为居中元素高度的一半；

如图：这里我用了一个绿色的border来展示这个隐藏元素；可以看到其实就是它把那个位置占据了，因此居中元素就自动往下平移了；

这里写图片描述

        .container {
            position: relative;
            border: 1px solid blue;
            height: 400px;
            width: 400px;
            display: table;
        }

        .vertical {
            height: 300px;
            clear: both;
            border: 1px solid red;
        }

        .floater {
            float: left;
            height: 50%;
            margin-bottom: -150px;
            border: 5px solid green;
        }

html

    <div class="container">
        <div class="floater"></div>
        <div class="vertical">
        </div>
    </div>

利用padding

    <div class="columns">
        <div class="item">test</div>
    </div>

        .columns {
            position: relative;
            border: 1px solid blue;
            /* height: 400px; */
            width: 400px;
            display: table;
        }
        .item {
            padding-top: 30px;
            padding-bottom: 30px;
        }