垂直居中一个浮动元素

场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。

原始代码如下:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">
    .wrapper{
        width: 400px;
        height: 300px;
        background-color: #1f8dd6;
    }

    button{  
        display: inline-block;
        height: 50px;
        width: 100px;
        line-height: 50px;
    }
    </style>
    </head>

    <body>
        <div class="wrapper">
            <button>float right.</button>
        </div>
    </body>
</html>

现在只是简单的设置这个button浮动，实现的效果看起来就像这样：

人家才不想变成这个样子

现在需要将这个button在整个div里垂直居中。我的做法是在这个button外层加一个span，并且浮动这个span元素而不是之前的button。另外需要设置这个span的高和行高与外层div相同。

span{
    float: right;
    height: 300px;
    line-height: 300px;
}

现在应该就变成这样了：

对嘛就是这样

完整代码：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css">
    .wrapper{
        width: 400px;
        height: 300px;
        background-color: #1f8dd6;
    }

    span{
        float: right;
        height: 300px;
        line-height: 300px;
    }

    button{  
        display: inline-block;
        height: 50px;
        width: 100px;
        line-height: 50px;
    }
    </style>
    </head>

    <body>
        <div class="wrapper">
            <span>
                <button>float right.</button>
            </span>
        </div>
    </body>
</html>

垂直居中一个浮动元素

yuchen

引用和评论

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式