盒子居中

关注

原创最新推荐文章于 2026-02-24 00:41:50 发布 421 阅读 AI 写同款· GEO 优化 ›

盒子实现水平居中有兴趣的可以看我的github地址：https://github.com/wangzhichao2019/-web- ①text-align:center;可以实现盒子里面的内容（文字，行内元素，行内块元素）居中对齐 ②margin：0 auto;表示的是盒子的左右是auto（自动）的，距离上边框的距离是0 ③margin-left:auto;表示盒子整体左边区域充满，盒子整体效果是在右边 ... 阅读详情

 .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;
}