css面试题

Posted 2021-03-09 samfung

水平垂直居中的几种方法

水平居中

1、如果是行内元素，只需在父元素设置 text-align: center; 即可。

2、块级元素，只需设置 margin: 0 auto; 即可。
如下元素结构：

<div id="wrap">
    <div id="box">hello world</div>
</div>

3、absolute + magin
定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。
缺点：要知道元素的宽度

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

4、absolute + translate
跟上面方法差不多，用 transform: translateX(-50%); 代替 margin-left，这样就不需要知道元素的宽度了。
缺点：transform 的兼容性（ie10）

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

5、absolute + margin auto
元素定位 left: 0; right: 0; margin: 0 auto; 即可。

#wrap{
    position: relative;
}
#box{
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

6、flex
弹性布局什么的最喜欢了。
缺点：flex 兼容性（ie11）

#wrap{
    display: flex;
    justify-content: center;
}

垂直居中

垂直居中跟水平居中有很多相似的方法。

1、如果是单行文本，设置 line-height 即可。

2、absolute + magin
定位位置为 top: 50%; 然后 margin-top: -50px; 向上偏移元素高度的一半。
缺点：要知道元素的高度

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

3、absolute + translate
跟上面方法差不多，用 transform: translateY(-50%); 代替 margin-top，这样就不需要知道元素的高度了。
缺点：transform 的兼容性（ie10）

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

4、absolute + margin auto
元素定位 top: 0; bottom: 0; margin: auto 0; 即可。

#wrap{
    position: relative;
}
#box{
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

5、display: table-cell
在父元素设置 display: table-cell; 将普通元素变成 table 元素，再设置 vertical-align: middle; 垂直居中。

#wrap{
    display: table-cell;
    vertical-align: middle;
}

6、flex
缺点：flex 兼容性（ie11）

#wrap{
    display: flex;
    align-items: center;
}

参考文章