盒子居中

CSS布局技巧

最新推荐文章于 2023-07-05 22:37:31 发布

原创最新推荐文章于 2023-07-05 22:37:31 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

 .container{
    display: table-cell;  //作为一个单元格来使用
    width: 600px;
    height: 500px;
    vertical-align: middle; //垂直居中显示
    border: 1px solid #000;
    }
  .inner{
     width: 200px;
     height: 200px; 
     background: #000;
     margin: auto;
    }   
============================================
    .container {
    display: -webkit-flex;
    display: flex;
    flex:direction;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}