CSS垂直水平居中

HTML结构

<div class="wrap">

        <div class="center">我要居中</div>

</div>

方法一：绝对定位+margin：auto;

   .wrap{
            position:relative;
            width:250px;
            height:150px;
            background: pink;
            overflow: hidden;
        }
        .center{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            /*一定要有宽高*/
            width:70px;
            height:50px;
            color:#fff;
            background: deepskyblue;
            margin:auto;
        }
 
 方法二：grid布局+justify-content、align-items
        .wrap{
            width:250px;
            height:150px;
            background: pink;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .center{
            color:#fff;
            background:deepskyblue;
        }
 
 
方法三：grid布局+margin
 .wrap{
            width:250px;
            height:150px;
            background:pink;
            display: grid;
        }
.center{
            color:#fff;
            background: deepskyblue;
            margin:auto;
        }
 
方法四：grid布局+justify-items、align-items
.wrap{
           width:250px;
           height:150px;
           background:pink;
           display: grid;
           justify-items: center;
           align-items: center;
       }
.center{
           color:#fff;
           background:deepskyblue;
       }
 
 
 方法五：flex布局+justfiy-content、align-items
       .wrap{
           width:250px;
           height:150px;
           background:pink;
           display: flex;
           justify-content:center;
           align-items: center;
       }
      .center{
           color:#fff;
           background:deepskyblue;
       }
 
方法六：flex布局+margin
  .wrap{
            width:250px;
            height:150px;
            background:pink;
            display: flex;
        }
  .center{
            color:#fff;
            background:deepskyblue;
            margin:auto;
        }
 
方法七：table-cell布局
        .wrap{
            width:250px;
            height:150px;
            background:pink;
            display: table-cell;
            vertical-align:middle;/*垂直居中*/
            text-align: center;/*水平居中*/
        }
        .center{
            color:#fff;
            background:deepskyblue;
            display: inline-block;
        }
 
 
方法八：绝对定位+transform
  .wrap{
            position:relative;
            width:250px;
            height:150px;
            background:pink;
        }
        .center{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            color:#fff;
            background:deepskyblue;
        }
 
 
方法九：伪元素+line-height;
        .wrap{
            width:250px;
            height:150px;
            background:pink;
            text-align: center;
        }
        .wrap::after{
            content:"";
            line-height: 150px;
        }
        .center{
            color:#fff;
            background: deepskyblue;
            display: inline-block;
        }
posted @ 2019-12-06 17:15  平凡人的普通修仙之路  阅读(152)  评论(0)  编辑  收藏  举报