浮动元素垂直居中，bootstrap栅格布局垂直居中 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
    #d1{
        position: relative;
        border:thin solid red;
        width:900px;
        height:100px;
    }
    #d2{/*dashed也是虚线*/
        border:thin dotted blue;
        width:50px;
        height:50px;
        float:right;  
    }
    .center-vertical{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    } 
</style>  
</head>
<body>
<div id="d1">
    <div id="d2" class="center-vertical"></div>
</div>
</body>  
</html>

 

posted @ 2017-10-16 14:40  似  阅读(9903)  评论(0)  编辑  收藏  举报