|
运用CSS实现元素居中在实质应用中非常平常，下边我说一下我所总结的几个实现元素居中的办法。
html基本代码
<div class="father">
<div class="child"></div>
</div>
css基本代码
* {
margin: 0;
padding: 0;
}
.father {
width: 100%;
height: 600px;
bac公斤round-color: #8d8d8d;
}
办法一
运用position: absolute 和 transform实现居中，此时父级应有position: relative属性
.child {
width: 300px;
height: 300px;
bac公斤round-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
办法二
运用position: absolute 和 margin、left、right实现居中，此时父级应有position: relative属性
.child {
width: 300px;
height: 300px;
bac公斤round: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
办法三
设置上下上下都为0，并运用margin auto实现居中，此时父级应有position: relative属性
.child {
width: 300px;
height: 300px;
bac公斤round: red;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
办法四
经过relative和margin auto实现，此时父级必须设置overflow:hidden（将父级设置为BFC）
.child {
position: relative;
width: 300px;
height: 300px;
margin: 150px auto;
bac公斤round: red;
}
办法五
运用display: flex,align-items: center,justify-content: center
.father {
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 300px;
height: 300px;
bac公斤round: red;
}
办法六
运用display: flex,margin: auto
.father {
display: flex;
}
.child {
margin: auto;
width: 300px;
height: 300px;
| 
发表于 2024-6-30 09:35:36
