使用绝对定位+负外边距让DIV层水平垂直居中页面

当我们需要把一个div层水平垂直居中在页面中时，我们可以使用绝对定位和负外边距来实现。下面是完整的攻略：

使用绝对定位+负外边距让DIV层水平垂直居中页面

1. 为需要居中的div层设置绝对定位，这个定位的父级元素也需要设置相对定位。

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

解释：

• .container是包裹.box的父级元素，需要设置相对定位，这样.box被绝对定位时，就以.container为相对定位的基准。
• .box使用绝对定位，并设置top和left为50%。

• 使用transform属性，通过translate(-50%, -50%)使.box在距离自身左侧和上方分别为内容宽高的一半的位置，达到了水平垂直居中的效果。

• 接下来为了将.box居中，在上述代码的基础上添加负外边距即可。

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -100px 0 0 -100px;
}

解释：

• margin: -100px 0 0 -100px; 表示上外边距和左外边距均为负值。-100px是因为.box的宽高为200px。

这样，我们就实现了在页面中水平垂直居中的效果。

示例

示例1：居中一个模态框

<div class="modal-container">
    <div class="modal-box">
        <h2>这是一个模态框</h2>
        <p>这是一个模态框的内容</p>
        <button>关闭</button>
    </div>
</div>

.modal-container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -150px 0 0 -150px; /*宽高为300px，外边距应减半*/
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
}

解释：

• .modal-container用于居中模态框，为了能够实现垂直居中，则指定高度为100vh，并使用flex布局进行水平居中和垂直居中。
• .modal-box使用绝对定位，设置top和left为50%进行水平和垂直居中，通过transform实现细节调整，再通过负外边距进行居中。

示例2：居中一个loading动画

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

.loading-container {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-box {
    position: relative;
    margin: auto; /*水平居中*/
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    animation: 2s spin linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

解释：

• .loading-container与前例类似，通过flex布局进行居中。
• .loading-box的margin: auto;实现了水平居中，再通过border-radius: 50%;设置为圆形，再加上边框和旋转动画即可实现一个简单的loading动画。