div中div水平垂直居中

Posted 2020-09-23 梦见一只电子羊

方法1：水平：margin:0 auto;

  垂直：使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                position: relative;
                
            }
            
            .child{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }

方法2：table cell:

            .parent {
                width: 500px;
                height: 500px;
                border: 1px solid red;
                display: table-cell;
                vertical-align: middle;
            }
            
            .chlid{
                width: 100px;
                height: 100px;
                border: 1px solid darkgreen;
                margin: 0 auto;
            }