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

<!doctype html>
<html >
<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 >
    <div  class="center-vertical"></div>
</div>
</body>  
</html>