css 盒子水平垂直居中

向右看齐 2023-08-17 15:40 120阅读 0赞

<div class="container">
    　　<div class="content">我是内容盒子</div>
     </div>
     　　 /*方法一：position margin: auto*/
          .container {
            position: relative;
          }
          .content {
            position: absolute;
            top： 0； left： 0;
            right： 0； bottom: 0;
            margin: auto;
          }
          /*注：当内容没有宽度高度时会充满整个空间可以用max-height来限制*/
          /*方法二：position top: 50% left: 50%;  margin-top:-50%*height margin-left:-50%*width*/
          .container {
            position: relative;
            height: 800px;
          }
          .content {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
          }
          /*方法三：position translate*/
          .container {
            position: relative;
            height: 800px;
          }
          .content {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
          /*方法四：display:flex*/
          .container {
            height: 800px;   /*父元素不能设置百分数，需要有一定的高度*/
            display: flex;      /*需要处理兼容性问题*/
            justify-content: center;
            align-items: center;
          }
          .content {
            width: 200px;
            height: 200px;
            background: red;
          }
        /*方法五： 父：dislay:table-cell */
        .container {
            width: 1366px;
            height: 800px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
          } 
          .content {
            width: 200px;
            height: 200px;
            background: red;
            display: inline-block;
          }

转载于:https://www.cnblogs.com/xiyuyizhihua/p/11125754.html