块级元素水平垂直居中

将一个块级元素水平垂直居中的方法

元素 HTML 代码：

<div id="wrap">
    <div id="inner"></div>
</div>

要实现的效果：

第一种方式

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    background: lightblue;
}
#inner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    background: yellow;
}

第二种方式

子元素的 width + padding + margin + left + right = 包含块宽度。
当子元素的 width 确定，padding、left、right 都为 0 ，margin 为 auto 时，包含块的宽度 - width 剩余的值，则为 margin 的值，margin-left 和 margin-right 平分这个值的大小。

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: lightblue;
}
#inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: yellow;
}

第三种方式

使用第一种方式，必须知道元素的宽高，当元素宽高不确定时，可以使用平移的方式。

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: lightblue;
}
#inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: yellow;
}