水平垂直居中方法

水平垂直居中的4种方法

1、

子元素设置绝对定位(position: absolute)

父元素设置相对定位(position: relative)

在子元素盒子中设置margin:auto；top:0；bottom:0; left:0; right:0;

 

2、

子元素设置绝对定位(position: absolute)

父元素设置相对定位(position: relative)

子元素top:50% left:50% margin-top:子元素高度一半 margin-left:子元素宽度一半

 

3、

父元素设置display:flex

Justify-content:center；

Align-items:center；  子元素无须设置

 

4、 

Div设置position: absolute；

        Top:50%；left:50%；

        Transform:translate(-50%，-50%)    无须父元素即可完成，参照长宽为主页面

 

 

以下为css代码，container为子元素类、app为父元素类

/* 第一种方法 */

.container{

    width: 50%;

    height: 50%;

    position: absolute;

    margin: auto;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: blue;

}

.app{

    width:  1000px;

    height: 1000px;

    position: relative;

}

/* 第二种方法 */

/* .container{

    width: 50%;

    height: 50%;

    top: 50%;

    left: 50%;

    margin-top: 25%;

    margin-left: 25%;

    background-color: blue;

}

.app{

    width:  1000px;

    height: 1000px;

    position: relative;

} */

 

/* 第三种方法 */

/* .container{

    width: 50%;

    height: 50%;

    background-color: blue;

  }

 

.app{

    width:  1000px;

    height: 1000px;

    display: flex;

    justify-content: center;

    align-items: center;

  }  */

 

/* 第四种方法 */

.container{

    width: 50%;

    height: 50%;

    background-color: blue;

    position: absolute;

    top: 50%;

    left: 50%;

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

  }