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

时间：2021-10-26 20:39:13
<!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>

相关文章