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

最新推荐文章于 2024-05-08 16:31:38 发布

转载最新推荐文章于 2024-05-08 16:31:38 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/supe/p/7676880.html

<!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>