div 居中方法汇总

居中问题无论在工作还是在面试中, 都是很常见的
下面我来给大家总结几种常用的方法, 大家可根据实际情况选择
好了, 废话不多说, 先看下效果

法1

定位+偏移 (margin)

• 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; /* 宽度的一半 */
}

法2

定位+偏移 (transform)

• 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%);
}

法3

利用 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

法4

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;
}

法5

text-align: center; + vertical-align: middle;

• html

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

• css

.father {
    width: 1000px;
    height: 600px;
    background: lightblue;
    text-align: center;
}
.son {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: yellow;
    vertical-align: middle;
}
.daughter {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

暂时想到这么多, 还有其他方法的小伙伴们欢迎补充, 我会将你的名字写上去, 谢谢!