实现垂直居中的方式

一、知道子元素的高度，但是不知道父元素的高度

这种情况下都要设置父元素的position为relative，子元素的position为absolute; 下面两种实现垂直居中的方式html部分代码和父元素的样式都是一样的，不同的只有子元素的css样式。

html:

    <div class="container">
        <div class="content">垂直居中</div>
    </div>

父元素样式

.container{
    height: 300px;
    position: relative;
    background-color: antiquewhite;
}

1.同时设置top和bottom为0，margin上下为auto。

下面是子元素的css样式代码:

.content{
    width: 100px;
    height: 100px;
    margin: auto 0;
    top: 0px;
    bottom:0px;
    position: absolute;
    background-color: aqua;
}

效果:

2.和上面不同的是这种方式没用到margin，但是用到了calc。

.content{
    height: 100px;
    top: calc(50% - 50px); //注意：这个地方减去的是高度的一半
    position: absolute;
    background-color: aqua;
}

效果:

二、子元素高度未知

1.通过flex布局

设置父元素display为flex，同时设置align-items为center;

html:

    <div class="container">
        <div class="content">垂直居中</div>
    </div>

css:

.container{
    height: 300px;
    display: flex;
    align-items: center;
    background-color: antiquewhite;
}

效果:

2.table-cell

父元素设置diaplay为table-cell,同时设置vertical-align: middle；

html:

    <div class="container">
        <div class="content">垂直居中</div>
    </div>

css:

.container{
    height: 300px;
    width: 300px;
    display: table-cell;
    vertical-align: middle;
    background-color: antiquewhite;
}

效果:

3.transform

父元素设置position为relative,子元素设置为absolute。设置资源的top为50%，同时使用transform:translateY(-50%)来实现垂直居中。不过这种方式会影响到其他属性.

html:

    <div class="container">
        <div class="content">垂直居中</div>
    </div>

css:

.container{
    height: 300px;
    position: relative;
    background-color: antiquewhite;
}
.content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: aqua;
}

效果: