CSS问题汇总

垂直水平居中问题

都拿下面这个div说事，咱们但愿son在它的父容器dad里垂直居中，dad设定为和设备同样宽高的容器，为了方便形容，基础样式写在public-*上，后续实现都在dad 和 son里实现。

<div class="public-dad dad">
    <div class="public-son son">我是son</div>
</div>
复制代码

.public-dad{
    height: 100vh;
    width: 100vw;
    background: antiquewhite;
}
.public-son{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background: lightpink;
}
复制代码

最终要实现如图效果：

先来讲说不用给son设定固定宽高的方法：

1. flex实现

给父亲的display设置成flex，并追加横轴、纵轴分布设定：

.dad{
    display: flex;
    justify-content: center;
    align-items: center;
}    
复制代码

虽然它很好用，但它有兼容性问题。

2. position + 位移 实现

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
复制代码

它也有兼容性问题

3. position + margin:auto 实现

.dad{
    position: relative;
}
.son{
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}
复制代码

这个方法看起来实在摸不清头脑，看了篇解释是说，去掉margin: auto后，son会占满父元素，而margin: auto会自动计算son的margin到父元素padding的距离做为son外边距。实际上也就是son的content+padding+border+margin会占满父元素。

接下来讲说必须给son设置固定宽高才能实现的方法：

4. position + margin 实现

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;  /*必须知道宽高，若是写50%，指的是父元素的50%*/
    margin-left: -100px;
}
复制代码

5. position + calc计算 (愚蠢方法，不推荐)

.dad{
    position: relative;
}
.son{
    position: absolute;
    margin: auto;
    top: calc((100% - 200px) / 2);
    left: calc((100% - 200px) / 2);
}
复制代码

手动计算top和let的位置。