div 居中方法汇总

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记

情况一: 父子容器宽高已知

方法一

• html

<div class="father">
    <div class="son"></div>
</div>

• css

.father {
    position: relative;
    width: 1000px;
    height: 600px;
    background: lightblue;
}
.son {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    top: 50%;
    margin-top: -50px; /* 高度的一半 */
    left: 50%;
    margin-left: -50px; /* 宽度的一半 */
}

方法二

利用 margin: auto; 自动分配多余空间

• html

<div class="father">
    <div class="son"></div>
</div>

• css

.father {
    position: relative;
    width: 1000px;
    height: 600px;
    background: lightblue;
}
.son {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

top、left、right、bottom 的值相等即可，不一定要都是0

方法三

用 Flex 布局

• html

<div class="father">
    <div class="son"></div>
</div>

• css

.father {
    width: 1000px;
    height: 600px;
    background: lightblue;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}
.son {
    width: 100px;
    height: 100px;
    background: yellow;
}

情况二: 父子容器宽高未知

方法一

• html

<div class="father">
    <div class="son"></div>
</div>

• css

.father {
    position: relative;
    width: 1000px;
    height: 600px;
    background: lightblue;
}
.son {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法二

用 Flex 布局

• html

<div class="father">
    <div class="son"></div>
</div>

• css

.father {
    width: 1000px;
    height: 600px;
    background: lightblue;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}
.son {
    width: 100px;
    height: 100px;
    background: yellow;
}

还有其他方法的小伙伴们欢迎补充 谢谢!