水平垂直居中的那些事儿

一直遇到各种垂直居中的问题，今天就一起来整理一下各种垂直居中的处理方法。

对于行内元素

一般而言行内元素比较简单，一般采用以下思路对父元素写CSS即可

        #wrap{
            text-align: center;
            line-height: 100px;
            height: 100px;
        }

 

对于块级元素

块级元素实现垂直居中的方法多种多样，视具体情况而选择

 

本次讨论的HTML代码如下

    <div id="wrap">
        <div id="inside">
        </div>
    </div>

 

div定宽高情况可直接用absolute定位解决

        #wrap{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: cadetblue;
        }

        #inside{
            position: absolute;
            width: 100px;
            height: 100px;
            margin-left: 150px;
            margin-top:  150px;
            background-color: green;
        }

 

margin:auto的应用解决垂直居中

        #wrap{
            position: relative;
            background-color: cadetblue;
        }

        #inside{
            position: absolute;
            margin: auto;
            top: 0;
            bottom :0;
            left: 0;
            right: 0;
            background-color: green;
        }

 

CSS3 transfrom实现垂直居中

        #wrap{
            position: relative;
            background-color: cadetblue;
        }

        #inside{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: green;
        }

 

flexbox实现垂直居中

        #wrap{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: cadetblue;
        }

 

flexbox的概念随着浏览器的更新以及移动端浏览器对于其良好的兼容性而变得越来越火，而伴随着一系列老版本IE的离开相信未来flexbox会大放异彩。

 

最后放上所有垂直居中的成果。