css 盒子水平垂直居中

Posted 2022-03-11 xiyuyizhihua

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