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

迷南。 2023-07-04 12:50 28阅读 0赞

## 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;
        }