(2019)[前端]面试题[6]:水平垂直居中方法

无道 2019-10-02 0 条评论 前端相关 阅读30 手机阅读

问题

水平垂直居中的实现方式,尽可能多

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

解答

这个有很多方法,我们一个个来说。

方法一:absoulte + transform(此方法未知子元素宽度)

截图-1570018445

<div class="parent">
    <div class="child">

    </div>
</div>
.parent {
    background-color: #eee;
    width: 500px;
    height: 500px;
    margin: 10px auto;
    position: relative;
}

.child {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

说明:父元素相对定位,子元素绝对定位。

并且子元素top,left各50%

然后transform: translate(-50%, -50%);

此方法未知子元素宽高度(也就是说可以随便变换宽高度)

如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

(而这里就不能随便变换宽高度,变了就要改变translate的值)

方法二:flex布局

这是非常简单的一种方法

截图-1570018792

<div class="parent">
    <div class="child">

    </div>
</div>
.parent {
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
    margin: 10px auto;
}

.child {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
}

将父元素设置为display: flex;

justify-content: center;

align-items: center;

都设置为居中对齐(分别为主轴居中,交叉轴居中)

涉及到flex语法,可以看flex相关文档/教程。

方法三:table-cell

截图-1570019070

<div class="parent">
    <div class="child">

    </div>
</div>
.parent {
    background-color: #eee;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 500px;
    margin: 10px auto;
}

.child {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: lightslategray;
}

简介:

父元素display:table-cell;

水平:text-align:center; 居中

垂直:vaertical-align: middle;居中

这还没完,需要子元素display:inline-block; ,不然只会垂直居中

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 10月02日 20:29
这篇文章还没有评论呢~
点击刷新/生成验证码