元素居中问题
通过CSS来实现元素居中问题
1.margin
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
.div {
width: 100px;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
margin-top: 50px;
margin-left: 50px;
}
</style>
margin-top : (父级元素height - 子级元素height)/ 2
margin-left : (父级元素width - 子级元素width)/ 2
2.flex
2.1 display: flex;
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
}
.div {
width: 100px;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
margin: auto;
}
</style>
2.2 flex属性
***justify-content***属性定义了子元素沿主轴方向的对齐方式
***align-items***定义了子元素在交叉轴方向的对齐方向
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.div {
width: 100px;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
}
</style>
3.position
left: 50%;
top: 50%;
容器会因为自身宽高无法居中
我们必须用
margin-left:容器宽的一半;
margin-top: 容器高的一半;
来进行调整
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.div {
width: 100px;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
4.tranform
CSS3的tranform平移属性
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
.div {
width: 100px;
height: 100px;
border: 1px solid #666;
box-sizing: border-box;
transform: translateX(50%) translateY(50%);
}
</style>