关于内容垂直居中（不定高）

css样式实现内容的垂直居中：

一：不定高

1：存在兼容性问题，低版本的火狐，对于display：flex的不兼容

display:flex;
justify-content:center;
align-items:center;

 

2：同样存在兼容性问题

display: table-cell；

vertical-align: middle；

3：

父元素的position：relative

 

position:absolute

top: 50%；

transform: translateY(-50%)；

 

4.

父元素的position：relative

 

position: absolute;

top:50%

left:50%

margin-left: -（width/2）

margin-top: -(height/2)

 

 

       /* 方式二：垂直居中 */

    .content{

        width: 200px;

        height: 500px;

        border:1px solid red;

        position: relative;

    }

    .content div{

        width: 50px;

        height: 50px;

        border:1px solid;

        position: absolute;

        top:0;

        left: 0;

        bottom: 0;

        right: 0;

        margin: auto;

    }

          /* 方式三：垂直居中 */

    .content{

        width: 200px;

        height: 500px;

        border:1px solid red;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .content div{

        width: 50px;

        height: 50px;

        border:1px solid;

    }

 

 

 

http://blog.csdn.net/freshlover/article/details/11579669  有介绍8种垂直居中的方法，但是还未尝试。记录一下