一个div在另一个div中水平垂直居中

最新推荐文章于 2022-03-20 09:21:55 发布

笑到世界都狼狈

最新推荐文章于 2022-03-20 09:21:55 发布

阅读量6.7k

点赞数 3

本文链接：https://blog.csdn.net/qq_36509946/article/details/87720496

版权

<meta charset="UTF-8">
<title>div居中</title> 
</head>
 <style>   
      .wrapper{
       width: 600px;
       height: 600px;
       background: pink;
       margin: 100px auto;
       position: relative;   
        }
    .content{
        width: 200px;
        height: 200px;
        background: #2B9FF8;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    } 
</style>  
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div> 
</body>     
</html>

还有另一种写法
#dialog {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
display: none;
}

#dialog > div {
width: 250px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%);
border: 1px solid #e5e5e5;
}

<.div>