css垂直居中整理

1.添加一个浮动div，居中内容清除浮动达到垂直居中效果
适用范围：通用

    <style type="text/css">
        .box{
            width:100%;
            height:500px;
            background:#ccc;
            }
        .float{
            float:left;
            width:100%;
            height:50%;
            margin-bottom:-100px;
            }
        .content{
            clear:both;
            height:200px;
            width:200px;
            margin:0 auto;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="float"></div>
            <div class="content"></div>
        </div>
    </body>

2.使用绝对定位和负边距（或者translate）
适用范围：通用

    <style type="text/css">
        .box{
            position:relative;
            width:100%;
            height:500px;
            background:#ccc;
            }
        .content{
            position:absolute;
            top:50%;
            left:50%;
            /*margin-top:-100px;
            margin-left:-100px;*/
            transform:translate(-50%,-50%);
            height:200px;
            width:200px;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="content"></div>
        </div>
    </body>

3.利用table-cell

    <style type="text/css">
        .box{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            width:1000px;
            height:500px;
            background:#ccc;
            }
        .content{
            width:100px;
            height:100px;
            margin:0 auto;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="content"></div>
        </div>
    </body>

4.仅利用line-height
适用范围：只对文本有效(块级元素无效)
多行时，断词会有问题

    <style type="text/css">
        .box{
            width:1000px;
            height:500px;
            line-height:500px;
            background:#ccc;
            }
        .content{
            width:100px;
            height:100px;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <span class="content">123123</span>
        </div>
    </body>

5.使用flex
参考阮一峰两篇flex布局文章
http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...

    <style type="text/css">
        .box{
            display: flex;
            justify-content:center;
            align-items:Center;
            width:1000px;
            height:500px;
            background:#ccc;
            }
        .content{
            width:100px;
            height:100px;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="content"></div>
        </div>
    </body>

6.绝对定位和0

    <style type="text/css">
        .box{
            position:relative;
            width:1000px;
            height:500px;
            background:#ccc;
            }
        .content{
            position:absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            width:100px;
            height:100px;
            overflow:auto;
            margin:auto;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="content"></div>
        </div>
    </body>

7.-webkit-box

    <style type="text/css">
        .box{
            position:relative;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
            width:1000px;
            height:500px;
            background:#ccc;
            }
        .content{
            width:100px;
            height:100px;
            overflow:auto;
            background:red;
            }
    </style>
    <body>
        <div class='box'>
            <div class="content"></div>
        </div>
    </body>

css垂直居中整理

小脑fu

引用和评论

javascript算法基础之01背包，完全背包，多重背包实现

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版