前端面试题汇总

css篇

 1.不知宽高的情况下，水平垂直居中的几种方式

<div class='content'>
    <div class='inner'>flex布局</div>
</div>

.content{
    display:flex;
    justify-content:center;
    align-items:center;
    width:400px;
    height:400px;
    background:#F00;
}

.inner{
    background:#000;
    color:#FFF;
}

<div class='conten'>
    <div class='inner'>transform布局</div>
</div>

.conten{
    position:relative;
    width:400px;
    height:400px;
    background:#F00; 
}

.inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%);
    background:#000;
    color:#FFF;
}