CSS 面试题——盒子水平垂直居中

CSS 面试题——盒子水平垂直居中

方法一：通过定位(三种方法)
1、已知盒子宽高

	html,body{
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
    }
    .box{
        width: 600px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -200px 0 0 -300px;//这时盒子的左上角在中心需要设margin负的值来让盒子水平垂直居中
        background: #f40;
    }

缺点：必须计算盒子宽高的一半

2、已设置盒子宽高

	html,body{
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
    }
    .box{
        width: 600px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #f40;
    }

缺点：盒子必须需要设置宽高

3、盒子不设宽高

	html,body{
        margin: 0;
        padding: 0;
        height: 100%;
        position: relative;
    }
    .box{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);//通过css3的transform属性来自动的让盒子向左向上走自己宽高的一半  
        background: #f40;
    }

缺点：有兼容性

方法二：通过flex布局

	html,body{
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: center;//水平方向居中
        align-items: center;//垂直方向居中
    }
    .box{
        width: 600px;
        height: 400px;     
        background: #f40;
    }

缺点：有兼容性

方法三：通过table-cell

	body{
        display: table-cell;
        vertical-align:middle;
        text-align: center;
        width: 900px;  //通过table-cell方法父盒子必须设宽高
        height: 900px;
        background: aqua;
    }
    .box{
        display: inline-block;
        width: 600px;
        height: 400px;     
        background: #f40;
    }