526互联

元素水平垂直居中的方法

发布时间 2023-06-29 11:18:39作者: 鄙人赵全超

 

// 利用定位+margin:auto

        // position:absolute;

        // top:0;

        // Left:0;

        // right:0;

        // bottom:0;

        // margin:auto;

// 利用定位+margin:负值

        // position:absolute;

        // top:50%;

        // Left:50%;

        // margin-left:-50px;

        // margin-top:-50px;

        // width:100px;

        // height:100px;

// 利用定位+transform

        // position:absolute;

        // t0p:50%;

        // Left:50%;

        // transform:translate(-50%,-50%);

// table布局

        // display: table-cell;

        // vertical-align: middle;

        // text-align: center;

// flex布局

        // display:flex;

        // justify-content:center;

        // align-items:center

// grid布局

        // display:grid;

        // align-items:center;

        // justify-content:center;