居中问题无论在工作还是在面试中, 都是很常见的
下面我来给大家总结几种常用的方法, 大家可根据实际情况选择
好了, 废话不多说, 先看下效果
法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;
}
暂时想到这么多, 还有其他方法的小伙伴们欢迎补充, 我会将你的名字写上去, 谢谢!
