前端面试储备——水平垂直居中_前端面试题:1- 设置一个盒子不受任何元素影响水平垂直居中-CSDN博客

本文链接：https://blog.csdn.net/u011289979/article/details/52464091

　　自学前端两月有余，校招近几天也拉开了帷幕，前途依旧一片迷茫，但相比两个月前的自己而言，着实有了不少进步。总之，抛开消极情绪，继续投身于我伟大的前端开发事业之中吧。
　　半月前参加深圳金蝶的提前批面试，虽然很快被刷掉，但作为人生第一次面试，多少会有一些经验积累与总结。面试中问及的问题，有了解的占据70%左右，对于一个当时只自学了不到两个月的菜鸟来说，自认为已经是一个较为满意的结果。但最终没有通过，主要还是源于对那了解的70%内容不够深入，或者说并没有真正地透彻理解。其中，就包括下面要说的水平垂直居中实现。近几日重点学习psd切图 -> html页面重构，也时常会涉及到盒子的居中问题，再次说明了此知识点的重要性。
　　水平垂直居中的实现方法，网上一搜少说有七八种，我今天这里只总结三种，作为自己后续面试以及实践的知识储备。

方法一：绝对定位+margin：auto实现

#father{
    width: 200px;
    height: 200px;
    background: #ccc;
    position: relative;
}

#son{
    width: 100px;
    height: 100px;
    background: #c00;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

将父盒子设置为相对定位
将子盒子设为绝对定位
子盒子将会以父盒子为参考设置位置。
将子盒子top、bottom、left、right等值设为0
子盒子margin：auto
子盒子上下左右边距为自适应，又要满足与父盒子上下左右相对距离为0，则为水平垂直居中。

方法二：绝对定位+margin实现

#father{
    width: 200px;
    height: 200px;
    background: #ccc;
    position: relative;
}

#son{
    width: 100px;
    height: 100px;
    background: #c00;
    position: absolute;
    margin-top: -50px;
    margin-left: -50px;
    left: 50%;
    top: 50%;
}

将父盒子设置为相对定位
将子盒子设为绝对定位
子盒子将会以父盒子为参考设置位置。
子盒子left: 50% top: 50%
子盒子向右移动父盒子的一半宽度，向下移动父盒子的一半高度，使其左边界与父盒子垂直中线重合，上边界与父盒子水平中线重合。
子盒子margin-top: -50px margin-left: -50px
子盒子向左移动其宽度的一半，向上移动其高度的一半，使其水平垂直中线皆与父盒子的水平垂直中线重合。
（3与4中margin和top等的赋值可以互换操作）

方法三：子盒子作为行内元素处理

#father{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
    line-height: 200px;
}

#son{
    width: 100px;
    height: 100px;
    background: #c00;
    display: inline-block;
    vertical-align: middle;
}