垂直居中的几种方式

定位方式居中

<div>
    <div class="parent">
        <div class="inner">

        </div>
    </div>
</div>
<style>
    .parent{
        width: 60px; height: 60px;
        border: 1px solid palevioletred;
        position: relative;
    }
    .inner{
        background: palegreen;
        width: 40px; height: 40px;
        position: absolute; left: 50%; top: 50%;
        /*方式1   缺点需要提前知道inner元素大小*/
        margin-top: -20px;    /* 高度的一半 */
        margin-left: -20px;    /* 宽度的一半 */
        /*方式2  */
        /*transform: translate(-50%, -50%);    !* 50%为自身尺寸的一半 *!*/
    }

https://jsfiddle.net/jsdt/kyr...
说明 方式二 transform 兼容性ie9+,方式一不会有兼容性问题。

margin auto方式

<div>
    <div class="parent">
        <div class="inner">

        </div>
    </div>
</div>
<style>
    .parent{
        width: 60px; height: 60px;
        border: 1px solid palevioletred;
        position: relative;
    }
    .inner{
        background: palegreen;
        width: 40px; height: 40px;
        position: absolute; left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;    /* 有了这个就自动居中了 */

    }
</style>

说明 上面方式没有兼容性问题,也不用自己计算。

table-cell方式

<div>
    <div class="parent">
        <div class="inner">
            <img src="./fbxq-button.png" alt="">
        </div>
    </div>
</div>
<style>
    .parent{
        width: 200px;
        height: 200px;
        border: 1px solid palevioletred;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
</style>

说明 table-cell方式兼容性比较好,但是外层标签不能设置定位或浮动,否则middle会失效。当table-cell内部是block元素时,middle也会生效。

内联方式

<div>
    <div class="parent">
        <div class="inner">
        </div>
    </div>
</div>
<style>
    .parent{
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 1px solid palevioletred;
        font-size: 0;

    }
.inner{
    width: 100px;
    height: 100px;
    background: black;
    vertical-align: middle;
    display: inline-block;
}

说明 parent内部必须是内联块元素,例如图片等。设置font-size: 0的目的是因为vertical-align:middle是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐,此时字体为零的话,字符中心和元素中心就在一条直线上了,这时inner是真正的居中。

flex

<div>
    <div class="parent">
            <img src="fbxq-button.png" alt="">
    </div>
</div>
<style>
    .parent{
        width: 200px;
        height: 200px;
        border: 1px solid palevioletred;
        display:flex;/*Flex布局*/
        display: -webkit-flex; /* Safari */
        justify-content: center;
        align-items: center;
    }

</style>

说明 这种方式移动端支持较好,很好用,parent内部无论是块还是内联block熟悉都会生效。关于flex语法介绍。

总结

垂直居中平时一直在用,今天将各个类型总结一下,通过写些验证demo加深印象,同时转化成自己的理解的方式,应该还不完善,以后遇到的话再补充吧。