css垂直水平居中

一、已知宽高

1.计算宽高，margin调整

在已知宽高的情况下，直接计算margin-top和margin-left的大小。不推荐

2.绝对定位+margin

.box-container {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: olivedrab;
}

.box-container .box {
    width: 50px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;  //高度的一半 
    margin-top: -20px;   //宽度的一半
    background-color: rebeccapurple;
}

<div class="box-container">
        <div class="box">

        </div>
    </div>

父元素相对定位，子元素绝对定位，top、left方向上相对父元素移动50%的距离，相当于子元素的左上角的点在中心的位置。然后再通过margin-left:-w/2，margin-top:-h/2,调整到中心位置。w、h是子元素的宽和高。

3.绝对定位+margin：auto

.p-box{
   position: relative;
    background-color: yellow;
    width: 100px;
    height: 80px;
}
.p-box .c-box{
    position: absolute;
    width: 60px;
    height: 50px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: aqua;
}

<div class="p-box">
        <div class="c-box"></div>
    </div>

父元素使用相对定位，子元素使用绝对定位，四个方向的偏移量都是0，之后用margin：auto分配剩余的空间，让子元素居中。

注意：margin:auto会自动去计算子元素和父元素之间的边距，并设为居中。所以就会实现上下左右都居中。但是margin：auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说，margin：auto和margin：0 auto 在一般情况下没有区别，不能实现垂直居中。
但是有了绝对定位后，margin-top和margin-bottom 的值就不是0了，也是通过计算所得。所以能实现垂直居中。

顺便记录一下margin百分比的相对值问题。
在w3c的规范中也是这样描述的： margin 的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。

二、未知高度

1.css3的transform（有兼容性问题）

.t-container{
 position: relative;
     background-color: yellow;
     width: 100px;
     height: 80px;
 }
 .t-container .t-box{
     position: relative;
     width: 10px;
     height: 10px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     background-color: red;
 }

<div class="t-container">
        <div class="t-box"></div>
    </div>

子元素相对定位，设置transform: translate(-50%,-50%)；在x、y轴上便宜，和上面的margin-left和margin-top设置相当

2.css3 flex布局（有兼容性问题）

.f-container{
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: yellow;
     width: 100px;
     height: 150px;
 }
 .f-container .f-box{
     background-color: red;
     width: 50px;
     height: 60px;
 }

<div class="f-container">
        <div class="f-box"></div>
    </div>

父元素display:flex,然后设置justify-content；align-items: center;

3.display: table-cell （无兼容性问题）

.c-container{
            background-color: yellow;
            width: 100px;
            height: 150px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

<div class="c-container">
        <p>12da32</p>
    </div>

父元素display:table-cell，text-align: center; vertical-align: middle;
但是遇到一个问题，就是p标签换成div标签，并设置宽高，会失效。这和display：table的布局属性有关。