乐趣区

关于css:CSS水平垂直居中

 这是笔者近日面试中遇到的一个“辣手”问题,所谓辣手,是因为 CSS 这个货色不常常写的话,是肯定会忘,会手生的。笔者只是提及了最常见也是最简略的 Flex,却被面试官持续诘问,本认为会依据记忆写进去点什么,最初却无奈。。。

话不多说了,上干货。

CSS 垂直居中的形式,这里我都以父元素嵌套子元素的模式开展:
已知子元素的宽高的状况下:
absolute + margin:auto

.parent{
    width:500px;
    height:500px;
    border:1px solid #ccc;
    position:relative;
}
.children{
    width:300px;
    height:300px;
    background-color:red;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

absolute + -margin:

.parent{/* 同下面的盒子那样 */}
.children{
    width:300px;
    height:300px;
    background-color:red;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
}

子元素宽高未知的状况下:
flex 布局:

.parent{
    display:flex;
    justify-content:center;
    align-item:center;
}

absolute + transform:

.parent{
    position:relative;
    /* 宽高同下面的盒子一样,这里不再反复设置了 */
}
.children{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
退出移动版