让一个盒子水平垂直居中的几种方法

首先定义两个盒子

 

        
main
    

1.使用弹性布局，定不定宽高无所谓

2.利用决对定位，设置left:50%和top:50%将子元素移到父元素中心位置，然后再通过translate来调整子元素的中心点到父元素的位置，该方法可以不定宽高

.container{
            position: relative;
            width: 300px;
            height: 300px;
            border: 5px solid #ccc;
        }
        .main{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: red;
        }

3.利用绝对定位，子元素所有方向都为0，将margin设置为auto，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高

4.利用绝对定位，设置left:50%和top :50%将子元素移到父元素的中心位置，然后再通过marfin-left和margin-top以子元素自己的一般宽高进行负值赋值。该方法必须定宽高