css 垂直居中办法小结（移动端、pc端）

html

<div id="expample">
    <div class="inner">Content here</div>
</div>

 

1、flex布局实现

<style>
        #expample {
            width: 400px;
            height: 100px;
            background: #eee;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #expample .inner {
            height: 50px;
            width: 70%;
            background: #aaa;
            color:#222;
        }
    </style>

2、　　margin:auto实现布局

 

#expample {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
}

#expample .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

　　3、css3 transform+position 

#expample {
            width: 400px;
            height: 100px;
            background: #eee;
            position: relative;
        }

        #expample .inner {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 50px;
            width: 70%;
            background: #aaa;
            color:#222;
            transform: translate(-50%,-50%);
        }

　　4、经典absolute已知宽高物体

#expample {
            width: 400px;
            height: 100px;
            background: #eee;
            position: relative;
        }

        #expample .inner {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 50px;
            width:300px;
            margin-left:-150px;
            margin-top:-25px;
            background: #aaa;
            color:#222;

        }