怎么让一个 div，垂直水平居中？

最新推荐文章于 2024-03-13 10:55:47 发布

Narakunah

最新推荐文章于 2024-03-13 10:55:47 发布

阅读量151

点赞数

分类专栏：面试题文章标签： div 垂直水平居中

本文链接：https://blog.csdn.net/weixin_42029451/article/details/80054108

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 div{
     width: 200px;        
     height: 200px;
     background: green;
     position:absolute;
     left:0;
     top: 0;
     bottom: 0;
     right: 0;
     margin: auto;
     }

div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:50%;   
            top:50%;
            transform: translate(-50%,-50%); 
        }

 .box{
          height:600px;
          display:flex;
          justify-content:center;
          align-items:center;
     }
     .box>div{
         background: green;
         width: 200px;
         height: 200px;
     }

div{
            width:200px;
            height: 200px;
            background:green;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }

 .box{
            width: 500px;
            height: 600px;
            background-color: red;
            display:table-cell;
            text-align:center;
           vertical-align:middle;
         }
         .box>div{
              display: inline-block;
              vertical-align: middle;
          }