1. 如何垂直居中一个元素？

参考答案：

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    position: absolute;
    /*父元素需要相对定位*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    /*设为高度的1/2*/
    margin-left: -100px;
    /*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    position: absolute;
    /*父元素需要相对定位*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*在水平和垂直方向上各偏移-50%*/
}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    margin: auto;
    /*很关键的一步*/
    position: absolute;
    /*父元素需要相对定位*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*让四个定位属性都为0*/
}

方法四：flex 布局居中

body {
    display: flex;
    /*设置外层盒子display为flex*/
    align-items: center;
    /*设置内层盒子的垂直居中*/
    justify-content: center;

    /*设置内层盒子的水平居中*/
    .content {
        width: 200px;
        height: 200px;
        background-color: #6699ff;
    }
}

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

.content {
    //img的容器设置如下
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}