实现垂直居中

关于margin-top、padding-top、top的取值

一个元素margin-top、padding-top设置为百分比时，如果该元素的定位为relative，那么其取值就是其直接父元素的width乘以该百分比得到的值。如果该元素的定位为absolute，则其取值是相对于最近的非static定位的父元素的width乘以该值。

之所以是相对于width而不是height，原因在于如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

对于top的取值，三个元素分别为grandparent，parent，child，如果child设置为position: absolute，则top的值等于百分比乘以最近的非static定位（absolute或是fixed）的height，如果一直往上找不到非static的父元素，则为百分比乘以屏幕高度。

为一个元素设置margin: auto相当于设置为margin: 0 auto，此时元素相对于父元素水平居中，但是垂直方向无法居中，因为此时的margin-top和margin-bottom都为0

但是如果给子元素设置了position: absolute; top: 0; left: 0; right: 0; bottom: 0;此时将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器，这时候如果再设置margin为auto就会给margin-top和margin-bottom设置相同的值使其居中。

垂直居中

1. flex布局方式

    .parent {
        display: flex;
        align-items: center;
    }
    .child {
        height: 100px;
    }
   

2. 利用top和transform来实现（使用top是因为top的取值是相对于父元素的height的）

    .parent {
        height: 500px;
        position: relative; // 如果不设置relative，那么top的取值就不相对于该父元素
    }
    .child {
        position: absolute;
        height: 100px;
        top: 50%;
        tranform: translateY(-50%);
    }
   

3. 黑科技

    .parent {
        height: 500px;
        position: relative; // 如果不设置relative那么就会相对于最近的非static定位父元素居中
    }
    .child {
        position: absolute;
        height: 100px;
        margin: auto; // 必须设置
        top: 0;
        bottom: 0; // 这两项设置垂直居中
        left: 0;
        right: 0; // 这两项实现水平居中
    }
   

4. 如果要使元素相对于屏幕始终垂直居中

    .fixed-center {
        height: 600px;
        width: 800px;
        background: pink;
        position: fixed; // 和上面和科技的唯一区别在于定位方式，这样就是相对于浏览器窗口定位了
        overflow: auto;
        margin: auto;
        top: 0; left: 0; bottom: 0; right: 0;
    }
   

   注意1：如果设置了positiond为fixed但是没有设置具体的top、bottom、left、right的值时，其实这时候会自动设置top为父元素的margin-top+border-top+padding-top的值，相应的left的值设为父元素的margin-left+border-left+padding-left的值，此处所指的父元素就是直接父元素，无论该父元素的定位方式如何。

   注意2：一般情况下fixed定位的元素是相对于浏览器窗口定位的，但是当该元素的父元素设置了transform值时，这时候就不是对于浏览器窗口定位了，而是相对于父元素的border内侧左上角定位了。还有一种情况：当不是直接父元素设置transform而是更上级的父元素设置transform时，此时fixed定位的元素是相对于直接父元素的border外侧左上角定位的

5. 利用table-cell来实现垂直居中

    .parent {
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        height: 100px;
        width: 100px;
    }
   
   

关于relative和absolute定位

如果一个元素的position设置为了relative，然后再设置top等值的话，就是相对于原有的位置进行平移，不会影响到其他同级元素的定位；

如果一个元素position设为了absolute，再设置了top等值，那就是相对于最近非static的定位（可以使fixed定位和absolute定位）的父级元素的border内侧左上角定位，会影响到其他的同级元素的定位，因为他脱离了文档流